.navbar-light {
    background-color: #71d4f5;
    max-width: 992px;
    justify-items: center;
    grid-area: nav;
}

.mr-auto {
    flex: 1;
    margin: auto !important;
    display: flex;
    justify-content: space-between;
}

.nav-item {
    color: white;
}

.navbar-light .navbar-nav .nav-link {
    font-size: 20px;
    font-weight: bold;
}

.footerBottomSocial__link {
    grid-area: "facebook";
}

.left {
    grid-area: left;
    padding: 10px;
}

.middle {
    grid-area: middle;
    padding: 10px;
}

.right {
    grid-area: right;
    padding: 10px;
}

.footer {
    grid-area: rights;
    display: inline-grid;
    min-width: 213px;
}

div.footer p {
    text-align: center;
}

.footerBottomSocial__icon {
}

@media (min-width:576px) {
    footer {
        grid-area: footer;
        display: grid;
        grid-template-columns: 1fr minmax(150px, 313px) minmax(150px, 313px) minmax(150px, 313px) 1fr;
        grid-template-rows: auto 50px;
        grid-template-areas: '. left middle right .' '. rights rights rights .';
    }
}

ul.navbar-nav.mr-auto {
    background-color: #71d4f5;
}

/* header h1 {
    font-family: Arial;
    line-height: 55px;
    color: #ffffff;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 45px;
} */
@media (min-width:1px) and (max-width:575px) {
    div.banner {
        display: grid;
        grid-template-columns: 1fr [title-start] 20px minmax(310px, 535px) 20px [title-end] 1fr;
        grid-template-rows: auto auto;
        grid-row-gap: 10px;
        grid-template-areas: '. top top top .' '. nav nav nav .';
    }
}

@media (min-width:576px) and (max-width:991px) {
    div.banner {
        display: grid;
        grid-template-columns: 1fr [title-start] 20px minmax(100px, 951px) 20px [title-end] 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. top top top .';
    }
}

@media (min-width:992px) {
    div.banner {
        display: grid;
        grid-template-columns: 1fr [title-start] 20px 952px 20px [title-end] 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. top top top .';
    }
}

div.header {
    grid-area: top;
    display: grid;
    grid-template-columns: 7fr 20px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'header . logo' 'nav nav nav';
}

img.banner {
    grid-area: header;
    align-self: center;
    max-height: 100px;
    width: 100%;
    height: auto;
    padding: 5px;
}

img.logo {
    grid-area: logo;
    justify-self: right;
    align-self: center;
    width: 100%;
    height: auto;
    padding: 5px;
}

@media (min-width:992px) {
    h1.header {
        font-size: 75px;
        justify-self: center;
        color: white;
        grid-area: 1 / 2 / 2 / 5;
        position: relative;
        top: -2px;
    }
}

@media (min-width:576px)  and (max-width:991px) {
    h1.header {
        font-size: 60px;
        justify-self: center;
        color: white;
        grid-area: 1 / 2 / 2 / 5;
        position: relative;
        top: 13px;
    }
}

@media (min-width:1px)  and (max-width:575px) {
    h1.header {
        font-size: 36px;
        justify-self: center;
        color: white;
        grid-area: 1 / 2 / 2 / 5;
        top: 6px;
        position: relative;
    }
}

p {
    color: #073155;
    left: 0px;
    text-indent: 0px;
}

@media (min-width:1px)  and (max-width:575px) {
    main h1 {
        grid-area: 2 / title / 3 / title;
        background: #073155;
        color: #ffffff;
        text-align: center;
        padding-bottom: 10px;
        max-width: 575px;
        min-width: 300px;
    }
}

@media (min-width:576px)  and (max-width:991px) {
    main h1 {
        grid-area: 2 / title / 3 / title;
        background: #073155;
        color: #ffffff;
        text-align: center;
        padding-bottom: 10px;
        max-width: 991px;
        min-width: 576px;
    }
}

@media (min-width:992px) {
    main h1 {
        grid-area: 2 / title / 3 / title;
        background: #073155;
        color: #ffffff;
        text-align: center;
        padding-bottom: 10px;
        max-width: 992px;
    }
}

main div {
}

h2 {
    color: #073155;
    font-family: Arial;
    font-weight: bold;
    text-align: center;
}

h2.sub {
    background-color: #5ebddd;
    color: #ffffff;
    padding-bottom: 5px;
}

h2.choice {
    font-size: 40px;
    align-self: center;
}

.joinchoice {
    text-align: center;
    font-weight: bold;
    color: #073155;
    font-size: 40px;
}

h2.non-scheme {
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: #9f9f9f;
    padding-bottom: 5px;
}

h3.sub.ni {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    background-color: #a4aca4;
    padding-bottom: 5px;
}

h3.sub.scot {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    background-color: #424c9e;
    line-height: 40px;
}

h3.sub.wales {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    background-color: red;
    line-height: 40px;
}

h3.sub.england {
    color: #073155;
    font-weight: bold;
    text-align: center;
    background-color: #0fcd0f;
    line-height: 40px;
}

h4.nc {
    color: white;
    text-align: center;
    background-color: #5ebddd;
    line-height: 35px;
}

p.sub {
    text-align: left;
    font-weight: bold;
}

p.box {
    border: 1px solid;
    padding: 5px;
}

p.ref {
    font-style: italic;
}

div.wuvid3 {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: auto auto;
    grid-template-areas: 'title video' 'text video';
    grid-area: act3;
}

div.wuvid1 {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: auto auto;
    grid-template-areas: 'title video' 'text video';
    grid-area: act1;
}

div.wuvid2 {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: auto auto;
    grid-template-areas: 'title video' 'text video';
    grid-area: act2;
}

h4.wu-title {
    padding: 5px;
    grid-area: title;
}

p.wu-text {
    grid-area: text;
}

a.wu-vid {
    grid-area: video;
    cursor: pointer;
    padding: 10px;
    justify-self: center;
}

p.inside {
    padding: 5px;
}

p.dom1 {
    grid-area: 1 / 2 / 2 / 4;
}

p.dom2 {
    grid-area: 2 / 2 / 3 / 4;
}

p.dom3 {
    grid-area: 3 / 1 / 4 / 4;
}

p.dom4 {
    grid-area: 4 / 1 / 5 / 4;
}

p.dom5 {
    grid-area: 5 / 2 / 6 / 4;
}

div.dom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
}

div.grip {
    display: grid;
    grid-template-columns: 50px 150px auto;
    grid-template-rows: auto auto auto auto auto;
    grid-gap: 10px;
    grid-template-areas: 'step1 image1 text1' 'step2 image2 text2' 'step3 image3 text3' 'step4 image4 text4' 'step5 image5 text5';
}

.posturegames {
    border: 5px solid #4dd42e;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
}

.bilateralgames {
    border: 5px solid #0000ff;
    margin-bottom: 15px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.sensorygames {
    border: 5px solid #ff00ff;
    margin-bottom: 15px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    border-radius: 10px;
    padding: 10px;
}

div.wrwugames {
    margin-bottom: 15px;
    border: 5px solid #cc99ff;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.whwugames {
    margin-bottom: 15px;
    border: 5px solid #ff6600;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.thwugames {
    margin-bottom: 15px;
    border: 5px solid #ff66cc;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.mlwugames {
    margin-bottom: 15px;
    border: 5px solid #66ffcc;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.shwugames {
    margin-bottom: 15px;
    border: 5px solid #66ff66;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

div.handgames {
    margin-bottom: 15px;
    border: 5px solid #ff0000;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
}

.trackinginst {
    border: 5px solid #fff000;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.trackinggames {
    border: 5px solid #fff000;
    padding: 10px;
    grid-area: text;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    border-radius: 10px;
    margin: 5px;
}

.spatialinst {
    border: 5px solid grey;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

.spatialgames {
    border: 5px solid grey;
    margin: 5px;
    grid-area: text;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

.motorinst {
    border: 5px solid brown;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

.motorgames {
    border: 5px solid brown;
    margin: 5px;
    grid-area: text;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

.visualinst {
    border: 5px solid tan;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

.visualgames {
    border: 5px solid tan;
    margin: 5px;
    grid-area: text;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    z-index: 999;
}

div.player.plyr__video-embed {
    max-width: 120px;
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

a.lightbox.lb-iframe {
}

@media (min-width:1px) and (max-width:399px) {
    .straight-lines {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }

    .curves-to-start {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
    }

    .top-exit {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }

    .tunnel {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    .hooks {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    .non-scheme-box {
        grid-area: 20 / content / 21 / content;
        display: grid;
        grid-template-columns: 200px minmax(50px,100px);
        grid-template-rows: auto auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-scheme-box-pr {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-scheme-box-nu {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 200px minmax(50px,100px);
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-letters {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    div.straight-cap {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    div.straight-slant-cap {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
    }

    div.straight-curly-cap {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
    }

    div.curly-cap {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }

    div.dia-pr {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 120px 120px;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }

    .worksheet-ref {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 100px 100px;
    }

    div.route {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-gap: 5px;
        grid-template-areas: '. routea routeb .' '. astage1 bstage1 .' '. arrowa1 arrowb1 .' '. astage2 bstage2 .' '. arrowa2 arrowb2 .' '. astage3 bstage3 .' '. arrowa3 arrowb3 .' '. astage4 bstage4 .' '. routec routed .' '. cstage1 dstage1 .' '. arrowc1 arrowd1 .' '. cstage2 dstage2 .' '. arrowc2 arrowd2 .' '. cstage3 dstage3 .' '. arrowc3 arrowd3 .' '. cstage4 dstage4 .';
    }

    div.stages {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'foundation-stage foundation-stage' 'key-stage-1 key-stage-2';
    }

    div.wxz {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. choice1 choice2 .' '. w1 w2 .' '. x1 x2 .' '. z1 z2 .' '. choice3 choice4 .' '. w3 w4 .' '. x3 x4 .' '. z3 z4 .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    .straight-lines {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    .curves-to-start {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 5px;
    }

    .top-exit {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .tunnel {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    .hooks {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    .non-scheme-box {
        grid-area: 20 / content / 21 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-scheme-box-pr {
        grid-area: 19 / content / 20 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-scheme-box-nu {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 10px;
    }

    .non-letters {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    div.straight-cap {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }

    div.straight-slant-cap {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    div.straight-curly-cap {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

    div.curly-cap {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 10px;
    }

    div.dia-pr {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 10px;
    }

    .worksheet-ref {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 100px 100px;
    }

    div.nums-ns {
        grid-area: 7 / content / 8/ content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 120px 1fr;
        grid-template-rows: 100px 100px;
        grid-gap: 10px;
    }

    div.route {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. routea routeb .' '. astage1 bstage1 .' '. arrowa1 arrowb1 .' '. astage2 bstage2 .' '. arrowa2 arrowb2 .' '. astage3 bstage3 .' '. arrowa3 arrowb3 .' '. astage4 bstage4 .' '. routec routed .' '. cstage1 dstage1 .' '. arrowc1 arrowd1 .' '. cstage2 dstage2 .' '. arrowc2 arrowd2 .' '. cstage3 dstage3 .' '. arrowc3 arrowd3 .' '. cstage4 dstage4 .';
    }

    div.stages {
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. foundation-stage foundation-stage .' '. key-stage-1 key-stage-2 .';
    }

    div.wxz {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. choice1 choice2 .' '. w1 w2 .' '. x1 x2 .' '. z1 z2 .' '. choice3 choice4 .' '. w3 w4 .' '. x3 x4 .' '. z3 z4 .';
    }

    img.icon {
        border-radius: 10px;
        border: 10px solid #283955;
        box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
        padding: 2px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .straight-lines {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .curves-to-start {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    .top-exit {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .tunnel {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .hooks {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .non-scheme-box {
        grid-area: 20 / content / 21 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'button text';
        grid-gap: 25px;
    }

    .non-scheme-box-pr {
        grid-area: 19 / content / 20 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 25px;
    }

    .non-scheme-box-nu {
        grid-area: 8 / content / 9;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 25px;
    }

    .non-letters {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    div.straight-cap {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    div.straight-slant-cap {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    div.straight-curly-cap {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 5px;
    }

    div.curly-cap {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    div.dia-pr {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .worksheet-ref {
        display: grid;
        grid-template-columns: 1fr auto 50px auto 1fr;
        grid-template-rows: 100px;
    }

    div.nums-ns {
        grid-area: 7 / content / 8/ content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 120px 1fr;
        grid-template-rows: 100px 100px;
        grid-gap: 10px;
    }

    div.route {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr ;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. routea routeb routec routed .' '. astage1 bstage1 cstage1 dstage1 .' '. arrowa1 arrowb1 arrowc1 arrowd1 .' '. astage2 bstage2 cstage2 dstage2 .' '. arrowa2 arrowb2 arrowc2 arrowd2 .' '. astage3 bstage3 cstage3 dstage3 .' '. arrowa3 arrowb3 arrowc3 arrowd3 .' '. astage4 bstage4 cstage4 dstage4 .';
    }

    div.stages {
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. foundation-stage foundation-stage .' '. key-stage-1 key-stage-2 .';
    }

    div.wxz {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. choice1 choice2 choice3 choice4 .' '. w1 w2 w3 w4 .' '. x1 x2 x3 x4 .' '. z1 z2 z3 z4 .';
    }
}

@media (min-width:992px) {
    .straight-lines {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    .curves-to-start {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 25px;
    }

    .top-exit {
        grid-area: 11 / content / 12 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    .tunnel {
        grid-area: 14 / content / 15 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    .hooks {
        grid-area: 17 / content / 18 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    .non-scheme-box {
        grid-area: 20 / content / 21 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'button text';
        grid-gap: 25px;
    }

    .non-scheme-box-pr {
        grid-area: 19 / content / 20 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'button text' '. .';
        grid-gap: 25px;
    }

    .non-scheme-box-nu {
        grid-area: 8 / content / 9 / content;
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        grid-template-areas: 'button text';
        grid-gap: 25px;
    }

    .non-letters {
        grid-area: 5 / content / 6 / content;
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 25px;
    }

    div.straight-cap {
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    div.straight-slant-cap {
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 25px;
    }

    div.straight-curly-cap {
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 25px;
    }

    div.curly-cap {
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    div.dia-pr {
        display: grid;
        grid-template-columns: 0px 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: auto;
        grid-gap: 25px;
    }

    .worksheet-ref {
        display: grid;
        grid-template-columns: 1fr auto 50px auto 1fr;
        grid-template-rows: 100px;
    }

    div.nums-ns {
        grid-area: 7 / content / 8 / content;
        display: grid;
        grid-template-columns: 1fr 120px 120px 120px 120px 120px 120px 1fr;
        grid-template-rows: 100px;
        grid-gap: 10px;
    }

    div.route {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr ;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. routea routeb routec routed .' '. astage1 bstage1 cstage1 dstage1 .' '. arrowa1 arrowb1 arrowc1 arrowd1 .' '. astage2 bstage2 cstage2 dstage2 .' '. arrowa2 arrowb2 arrowc2 arrowd2 .' '. astage3 bstage3 cstage3 dstage3 .' '. arrowa3 arrowb3 arrowc3 arrowd3 .' '. astage4 bstage4 cstage4 dstage4 .';
    }

    div.stages {
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr auto auto auto 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. foundation-stage key-stage-1 key-stage-2 .';
    }

    div.wxz {
        grid-area: 4 / content / 5 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. choice1 choice2 choice3 choice4 .' '. w1 w2 w3 w4 .' '. x1 x2 x3 x4 .' '. z1 z2 z3 z4 .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    .box1 {
        grid-area: 1 / 1 / 2 / 2;
        cursor: pointer;
    }

    .box2 {
        grid-area: 1 / 2 / 2 / 3;
        cursor: pointer;
    }

    .box3 {
        grid-area: 2 / 1 / 3 / 2;
        cursor: pointer;
    }

    .box4 {
        grid-area: 2 / 2 / 3 / 3;
        cursor: pointer;
    }

    .box5 {
        grid-area: 3 / 1 / 4 / 2;
        cursor: pointer;
    }

    .box6 {
        grid-area: 3 / 2 / 4 / 3;
        cursor: pointer;
    }

    .box7 {
        grid-area: 4 / 1 / 5 / 2;
        cursor: pointer;
    }

    .box8 {
        grid-area: 4 / 2 / 5 / 3;
        cursor: pointer;
    }

    .box9 {
        grid-area: 5 / 1 / 6 / 2;
        cursor: pointer;
    }

    .box10 {
        grid-area: 5 / 2 / 6 / 3;
        cursor: pointer;
    }

    .box11 {
        grid-area: 6 / 1 / 7 / 2;
        cursor: pointer;
    }

    .box12 {
        grid-area: 6 / 2 / 7 / 3;
        cursor: pointer;
    }

    .box13 {
        grid-area: 7 / 1 / 8 / 2;
        cursor: pointer;
    }

    .box14 {
        grid-area: 7 / 2 / 8 / 3;
        cursor: pointer;
    }

    .box15 {
        grid-area: 8 / 1 / 9 / 2;
        cursor: pointer;
    }

    .box16 {
        grid-area: 8 / 2 / 9 / 3;
        cursor: pointer;
    }

    .box17 {
        grid-area: 9 / 1 / 10 / 2;
        cursor: pointer;
    }

    .box18 {
        grid-area: 9 / 2 / 10 / 3;
        cursor: pointer;
    }

    .box19 {
        grid-area: 10 / 1 / 11 / 2;
        cursor: pointer;
    }

    .wks-beg {
        grid-area: 1 / 2 / 2 / 3;
        align-self: center;
    }

    .wks-ref {
        grid-area: 2 / 2 / 3 / 3;
        align-self: center;
    }

    div.maps {
        grid-gap: 5px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'England Northern-Ireland' 'Scotland Wales';
    }
}

@media (min-width:400px) and (max-width:767px) {
    .box1 {
        grid-area: 1 / 2 / 2 / 3;
        cursor: pointer;
    }

    .box2 {
        grid-area: 1 / 3 / 2 / 4;
        cursor: pointer;
    }

    .box3 {
        grid-area: 1 / 4 / 2 / 5;
        cursor: pointer;
    }

    .box4 {
        grid-area: 2 / 2 / 3 / 3;
        cursor: pointer;
    }

    .box5 {
        grid-area: 2 / 3 / 3 / 4;
        cursor: pointer;
    }

    .box6 {
        grid-area: 2 / 4 / 3 / 5;
        cursor: pointer;
    }

    .box7 {
        grid-area: 3 / 2 / 4 / 3;
        cursor: pointer;
    }

    .box8 {
        grid-area: 3 / 3 / 4 / 4;
        cursor: pointer;
    }

    .box9 {
        grid-area: 3 / 4 / 4 / 5;
        cursor: pointer;
    }

    .box10 {
        grid-area: 4 / 2 / 5 / 3;
        cursor: pointer;
    }

    .box11 {
        grid-area: 4 / 3 / 5 / 4;
        cursor: pointer;
    }

    .box12 {
        grid-area: 4 / 4 / 5 / 5;
        cursor: pointer;
    }

    .box13 {
        grid-area: 5 / 2 / 6 / 3;
        cursor: pointer;
    }

    .box14 {
        grid-area: 5 / 3 / 6 / 4;
        cursor: pointer;
    }

    .box15 {
        grid-area: 5 / 4 / 6 / 5;
        cursor: pointer;
    }

    .box16 {
        grid-area: 6 / 2 / 7 / 3;
        cursor: pointer;
    }

    .box17 {
        grid-area: 6 / 3 / 7 / 4;
        cursor: pointer;
    }

    .box18 {
        grid-area: 6 / 4 / 7 / 5;
        cursor: pointer;
    }

    .box19 {
        grid-area: 7 / 2 / 8 / 3;
        cursor: pointer;
    }

    .wks-beg {
        grid-area: 1 / 2 / 2 / 3;
        align-self: center;
    }

    .wks-ref {
        grid-area: 2 / 2 / 3 / 3;
        align-self: center;
    }

    div.maps {
        grid-gap: 10px;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. England Northern-Ireland .' '. Scotland Wales .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    .box1 {
        grid-area: 1 / 2 / 2 / 3;
        cursor: pointer;
    }

    .box2 {
        grid-area: 1 / 3 / 2 / 4;
        cursor: pointer;
    }

    .box3 {
        grid-area: 1 / 4 / 2 / 5;
        cursor: pointer;
    }

    .box4 {
        grid-area: 1 / 5 / 2 / 6;
        cursor: pointer;
    }

    .box5 {
        grid-area: 1 / 6 / 2 / 7;
        cursor: pointer;
    }

    .box6 {
        grid-area: 2 / 2 / 3 / 3;
        cursor: pointer;
    }

    .box7 {
        grid-area: 2 / 3 / 3 / 4;
        cursor: pointer;
    }

    .box8 {
        grid-area: 2 / 4 / 3 / 5;
        cursor: pointer;
    }

    .box9 {
        grid-area: 2 / 5 / 3 / 6;
        cursor: pointer;
    }

    .box10 {
        grid-area: 2 / 6 / 3 / 7;
        cursor: pointer;
    }

    .box11 {
        grid-area: 3 / 2 / 4 / 3;
        cursor: pointer;
    }

    .box12 {
        grid-area: 3 / 3 / 4 / 4;
        cursor: pointer;
    }

    .box13 {
        grid-area: 3 / 4 / 4 / 5;
        cursor: pointer;
    }

    .box14 {
        grid-area: 3 / 5 / 4 / 6;
        cursor: pointer;
    }

    .box15 {
        grid-area: 3 / 6 / 4 / 7;
        cursor: pointer;
    }

    .box16 {
        grid-area: 4 / 2 / 5 / 3;
        cursor: pointer;
    }

    .box17 {
        grid-area: 4 / 3 / 5 / 4;
        cursor: pointer;
    }

    .box18 {
        grid-area: 4 / 2 / 5 / 3;
        cursor: pointer;
    }

    .box19 {
        grid-area: 4 / 3 / 5 / 4;
        cursor: pointer;
    }

    .wks-beg {
        grid-area: 1 / 2 / 2 / 3;
        align-self: center;
    }

    .wks-ref {
        grid-area: 1 / 4 / 2 / 5;
        align-self: center;
    }

    div.maps {
        grid-gap: 25px;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. England Northern-Ireland Scotland Wales .';
    }
}

@media (min-width:992px){
    .box1 {
        grid-area: 1 / 2 / 2 / 3;
        cursor: pointer;
    }

    .box2 {
        grid-area: 1 / 3 / 2 / 4;
        cursor: pointer;
    }

    .box3 {
        grid-area: 1 / 4 / 2 / 5;
        cursor: pointer;
    }

    .box4 {
        grid-area: 1 / 5 / 2 / 6;
        cursor: pointer;
    }

    .box5 {
        grid-area: 1 / 6 / 2 / 7;
        cursor: pointer;
    }

    .box6 {
        grid-area: 1 / 7 / 2 / 8;
        cursor: pointer;
    }

    .box7 {
        grid-area: 2 / 2 / 3 / 3;
        cursor: pointer;
    }

    .box8 {
        grid-area: 2 / 3 / 3 / 4;
        cursor: pointer;
    }

    .box9 {
        grid-area: 2 / 4 / 3 / 5;
        cursor: pointer;
    }

    .box10 {
        grid-area: 2 / 5 / 3 / 6;
        cursor: pointer;
    }

    .box11 {
        grid-area: 2 / 6 / 3 / 7;
        cursor: pointer;
    }

    .box12 {
        grid-area: 2 / 7 / 3 / 8;
        cursor: pointer;
    }

    .box13 {
        grid-area: 3 / 2 / 4 / 3;
        cursor: pointer;
    }

    .box14 {
        grid-area: 3 / 3 / 4 / 4;
        cursor: pointer;
    }

    .box15 {
        grid-area: 3 / 4 / 4 / 5;
        cursor: pointer;
    }

    .box16 {
        grid-area: 3 / 5 / 4 / 6;
        cursor: pointer;
    }

    .box17 {
        grid-area: 3 / 6 / 4 / 7;
        cursor: pointer;
    }

    .box18 {
        grid-area: 3 / 7 / 4 / 8;
        cursor: pointer;
    }

    .box19 {
        grid-area: 4 / 2 / 5 / 3;
        cursor: pointer;
    }

    .wks-beg {
        grid-area: 1 / 2 / 2 / 3;
        align-self: center;
    }

    .wks-ref {
        grid-area: 1 / 4 / 2 / 5;
        align-self: center;
    }

    div.maps {
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. England Northern-Ireland Scotland Wales .' '. . . . . .';
    }
}

a.plain {
    color: #073155;
    text-decoration: none;
}

ul.div {
    color: #073155;
}

ul.div.bold {
    font-weight: bolder;
}

ul.nc {
    color: #073155;
    border: 1px solid;
}

ul.bullit {
    color: #073155;
}

ul.sub-bullit {
    color: #073155;
    list-style-type: disc;
}

ul.circle-bullit {
    color: #073155;
    list-style-type: circle;
}

ul.footer {
    color: white;
}

.center {
    margin: auto;
}

.container {
    margin: 20px auto;
    max-width: 500px;
}

.letter-choice-row1 {
    background-color: purple;
}

.letter-choice-row2 {
    background-color: #edaff3;
}

.letter-choice-row3 {
    background-color: #808080;
}

.letter-choice-row4 {
    background-color: #c0c0c0;
}

.white {
    color: white;
    font-weight: bold;
    align-self: center;
    padding: 10px;
    font-size: 25px;
}

.blue {
    color: #073155;
    font-weight: bold;
    align-self: center;
    padding: 10px;
    font-size: 25px;
}

.posture {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #4dd42e;
}

.bilateral {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #0000ff;
}

.tracking {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #fff000;
}

.spatial {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid grey;
}

.motor {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid brown;
}

.visual {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid tan;
}

.hand {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid red;
}

img.arrow {
    align-self: center;
    justify-self: center;
}

.sensory {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #ff00ff;
}

img.shwu {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #66ff66;
}

img.mlwu {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #66ffcc;
}

img.wrwu {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #cc99ff;
}

img.thwu {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #ff66cc;
}

img.whwu {
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    padding: 2px;
    border: 10px solid #ff6600;
}

@media (min-width:1px) and (max-width:399px) {
    textarea {
        width: 350px;
        height: 300px;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        box-sizing: border-box;
        border: 2px solid blue;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 16px;
        resize: none;
    }
}

@media (min-width:400px) and (max-width:767px) {
    textarea {
        width: 400px;
        height: 300px;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        box-sizing: border-box;
        border: 2px solid blue;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 16px;
        resize: none;
    }
}

@media (min-width:768px) and (max-width:991px) {
    textarea {
        width: 700px;
        height: 150px;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        box-sizing: border-box;
        border: 2px solid blue;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 16px;
        resize: none;
    }
}

@media (min-width:992px) {
    textarea {
        width: 800px;
        height: 150px;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        box-sizing: border-box;
        border: 2px solid blue;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 16px;
        resize: none;
    }
}

@media (min-width:768px) {
    img.poster {
        grid-area: 1 / 2 / 2 / 6;
        object-fit: cover;
        width: 940px;
        height: 114px;
        position: center;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s2 {
        display: grid;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 'beg-but-1 beg-img-1' 'ref-but-1 ref-img-1' 'beg-but-2 beg-img-2' 'ref-but-2 ref-img-2' 'beg-but-3 beg-img-3' 'ref-but-3 ref-img-3';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s2 {
        display: grid;
        grid-template-columns: 1fr 200px auto 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 .' '. ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 .' '. ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 .' '. ref-but-3 ref-img-3 .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s2 {
        display: grid;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s2 {
        display: grid;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s2ks15 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'beg-but-1 beg-img-1' 'ref-but-1 ref-img-1' 'beg-but-2 beg-img-2' 'ref-but-2 ref-img-2' 'beg-but-3 beg-img-3' 'ref-but-3 ref-img-3' 'beg-but-4 beg-img-4' 'ref-but-4 ref-img-4' 'beg-but-5 beg-img-5' 'ref-but-5 ref-img-5';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s2ks15 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 .' '. ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 .' '. ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 .' '. ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 .' '. ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 .' '. ref-but-5 ref-img-5 .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s2ks15 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 ref-but-5 ref-img-5 .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s2ks15 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 ref-but-5 ref-img-5 .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s2ks16 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'beg-but-1 beg-img-1' 'ref-but-1 ref-img-1' 'beg-but-2 beg-img-2' 'ref-but-2 ref-img-2' 'beg-but-3 beg-img-3' 'ref-but-3 ref-img-3' 'beg-but-4 beg-img-4' 'ref-but-4 ref-img-4' 'beg-but-5 beg-img-5' 'ref-but-5 ref-img-5' 'beg-but-6 beg-img-6' 'ref-but-6 ref-img-6';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s2ks16 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 .' '. ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 .' '. ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 .' '. ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 .' '. ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 .' '. ref-but-5 ref-img-5 .' '. beg-but-6 beg-img-6 .' '. ref-but-6 ref-img-6 .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s2ks16 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 ref-but-5 ref-img-5 .' '. beg-but-6 beg-img-6 ref-but-6 ref-img-6 .';
        grid-gap: 15px;
    }
}

@media (min-width:992px) {
    div.hw-s2ks16 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .' '. beg-but-5 beg-img-5 ref-but-5 ref-img-5 .' '. beg-but-6 beg-img-6 ref-but-6 ref-img-6 .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s2ks14 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-template-areas: 'beg-but-1 beg-img-1' 'ref-but-1 ref-img-1' 'beg-but-2 beg-img-2' 'ref-but-2 ref-img-2' 'beg-but-3 beg-img-3' 'ref-but-3 ref-img-3' 'beg-but-4 beg-img-4' 'ref-but-4 ref-img-4';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s2ks14 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 .' '. ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 .' '. ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 .' '. ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 .' '. ref-but-4 ref-img-4 .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s2ks14 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s2ks14 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. beg-but-1 beg-img-1 ref-but-1 ref-img-1 .' '. beg-but-2 beg-img-2 ref-but-2 ref-img-2 .' '. beg-but-3 beg-img-3 ref-but-3 ref-img-3 .' '. beg-but-4 beg-img-4 ref-but-4 ref-img-4 .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s1 {
        display: grid;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto;
        grid-template-areas: 'ph-button ph-image';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s1 {
        display: grid;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s1 {
        display: grid;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s1 {
        display: grid;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:575px) {
    div.hw-s3 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: auto 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: '. ph-button .' '. ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:576px) and (max-width:991px) {
    div.hw-s3 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s3 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s3join {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto;
        grid-template-areas: 'ph-button ph-image';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s3join {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s3join {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s3join {
        display: grid;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s3join1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 200px 120px;
        grid-template-rows: auto;
        grid-template-areas: 'ph-button ph-image';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s3join1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s3join1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s3join1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.hw-s3ks1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 200px 120px 200px 120px;
        grid-template-rows: auto auto ;
        grid-template-areas: 'cur-but cur-img' 'con-but con-img';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.hw-s3ks1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto auto ;
        grid-template-areas: '. cur-but cur-img .' '. con-but con-img .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.hw-s3ks1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. cur-but cur-img con-but con-img .';
        grid-gap: 15px;
    }
}

@media (min-width:992px) {
    div.hw-s3ks1 {
        display: grid;
        grid-area: 8 / content / 9 / content;
        grid-template-columns: 1fr 200px 120px 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. cur-but cur-img con-but con-img .';
        grid-gap: 25px;
    }
}

@media (min-width:1px) and (max-width:575px) {
    div.hw-s3ks2 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: auto 200px auto;
        grid-template-rows: auto auto;
        grid-template-areas: '. ph-button .' '. ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:576px) and (max-width:991px) {
    div.hw-s3ks2 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

@media (min-width:992px) {
    div.hw-s3ks2 {
        display: grid;
        grid-area: 6 / content / 7 / content;
        grid-template-columns: 1fr 200px 120px 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. ph-button ph-image .';
        grid-gap: 25px;
    }
}

.worksheet-beg {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 75px;
}

a.footer-menu {
    color: white;
    text-decoration: none;
}

@media (min-width:1px) and (max-width:399px) {
    div.letter-version {
        display: grid;
        grid-template-columns: 10px auto auto 10px;
        grid-template-rows: 10px auto auto auto auto auto auto auto auto auto auto 10px 10px;
        grid-template-areas: '. . . .' '. cursive cursive .' '. cur-ver-1 cur-ver-2 .' '. cursive-w1 cursive-w2 .' '. cursive-x1 cursive-x2 .' '. cursive-z1 cursive-z2 .' '. . . .' '. cur-ver-3 cur-ver-4 .' '. cursive-w3 cursive-w4 .' '. cursive-x3 cursive-x4 .' '. cursive-z3 cursive-z4 .' '. . . .' '. . . .';
        grid-gap: 5px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.letter-version {
        display: grid;
        grid-template-columns: 1fr 10px 1fr 1fr 10px 1fr;
        grid-template-rows: 10px auto auto auto auto auto auto auto auto auto auto 10px 10px;
        grid-template-areas: '. . . . . .' '. . cursive cursive . .' '. . cur-ver-1 cur-ver-2 . .' '. . cursive-w1 cursive-w2 . .' '. . cursive-x1 cursive-x2 . .' '. . cursive-z1 cursive-z2 . .' '. . . . . .' '. . cur-ver-3 cur-ver-4 . .' '. . cursive-w3 cursive-w4 . .' '. . cursive-x3 cursive-x4 . .' '. . cursive-z3 cursive-z4 . .' '. . . . . .' '. . . . . .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.letter-version {
        display: grid;
        grid-template-columns: 1fr 10px auto auto auto auto 10px 1fr;
        grid-template-rows: 10px auto auto auto auto auto 10px 10px;
        grid-template-areas: '. . . . . . . .' '. . cursive cursive cursive cursive . .' '. . cur-ver-1 cur-ver-2 cur-ver-3 cur-ver-4 . .' '. . cursive-w1 cursive-w2 cursive-w3 cursive-w4 . .' '. . cursive-x1 cursive-x2 cursive-x3 cursive-x4 . .' '. . cursive-z1 cursive-z2 cursive-z3 cursive-z4 . .' '. . . . . . . .' '. . . . . . . .';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.letter-version {
        display: grid;
        grid-template-columns: 1fr 10px 1fr 1fr 1fr 1fr 10px 1fr;
        grid-template-rows: 10px auto auto auto auto auto 10px 10px;
        grid-template-areas: '. . . . . . . .' '. . cursive cursive cursive cursive . .' '. . cur-ver-1 cur-ver-2 cur-ver-3 cur-ver-4 . .' '. . cursive-w1 cursive-w2 cursive-w3 cursive-w4 . .' '. . cursive-x1 cursive-x2 cursive-x3 cursive-x4 . .' '. . cursive-z1 cursive-z2 cursive-z3 cursive-z4 . .' '. . . . . . . .' '. . . . . . . .';
        grid-gap: 10px;
    }
}

img.justify {
    justify-self: center;
    width: 75px;
    height: 62.5px;
}

@media (min-width:1px) and (max-width:399px) {
    div.con-v1 {
        grid-area: 14 / 1 / 19 / 2;
        background-color: purple;
        z-index: -9;
    }

    div.con-v2 {
        grid-area: 14 / 2 / 19 / 3;
        z-index: -9;
        background-color: #f2bdf5;
    }

    div.con-v3 {
        grid-area: 19 / 1 / 24 / 2;
        background-color: grey;
        z-index: -9;
    }

    div.con-v4 {
        grid-area: 19 / 2 / 24 / 3;
        background-color: #dcd7d7;
        z-index: -9;
    }

    div.cur-v1 {
        grid-area: 3 / 2 / 8 / 3;
        background-color: purple;
        z-index: -9;
        border: 10px solid purple;
        border-radius: 10px;
    }

    div.cur-v2 {
        grid-area: 3 / 3 / 8 / 4;
        z-index: -9;
        background-color: #f2bdf5;
        border: 10px solid #f2bdf5;
        border-radius: 10px;
    }

    div.cur-v3 {
        grid-area: 8 / 2 / 13 / 3;
        background-color: grey;
        z-index: -9;
        border: 10px solid grey;
        border-radius: 10px;
    }

    div.cur-v4 {
        grid-area: 8 / 3 / 13 / 4;
        background-color: #dcd7d7;
        z-index: -9;
        border: 10px solid #dcd7d7;
        border-radius: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.con-v1 {
        grid-area: 14 / 2 / 19 / 3;
        background-color: purple;
        z-index: -9;
    }

    div.con-v2 {
        grid-area: 14 / 3 / 19 / 4;
        z-index: -9;
        background-color: #f2bdf5;
    }

    div.con-v3 {
        grid-area: 19/ 2 / 24 / 3;
        background-color: grey;
        z-index: -9;
    }

    div.con-v4 {
        grid-area: 19 / 3 / 24 / 4;
        background-color: #dcd7d7;
        z-index: -9;
    }

    div.cur-v1 {
        grid-area: 3 / 3/ 8 / 4;
        background-color: purple;
        z-index: -9;
        border: 10px solid purple;
        border-radius: 10px;
    }

    div.cur-v2 {
        grid-area: 3 / 4 / 8 / 5;
        z-index: -9;
        background-color: #f2bdf5;
        border: 10px solid #f2bdf5;
        border-radius: 10px;
    }

    div.cur-v3 {
        grid-area: 8 / 3 / 13 / 4;
        background-color: grey;
        z-index: -9;
        border: 10px solid grey;
        border-radius: 10px;
    }

    div.cur-v4 {
        grid-area: 8 / 4 / 13/ 5;
        background-color: #dcd7d7;
        z-index: -9;
        border: 10px solid #dcd7d7;
        border-radius: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.con-v1 {
        grid-area: 9 / 2 / 14 / 3;
        background-color: purple;
        z-index: -9;
    }

    div.con-v2 {
        grid-area: 9 / 3 / 14 / 4;
        z-index: -9;
        background-color: #f2bdf5;
    }

    div.con-v3 {
        grid-area: 9 / 4 / 14 / 5;
        background-color: grey;
        z-index: -9;
    }

    div.con-v4 {
        grid-area: 9 / 5 / 14 / 6;
        background-color: #dcd7d7;
        z-index: -9;
    }

    div.cur-v1 {
        grid-area: 3 / 3 / 8 / 4;
        background-color: purple;
        z-index: -9;
        border: 10px solid purple;
        border-radius: 10px;
    }

    div.cur-v2 {
        grid-area: 3 / 4 / 8 / 5;
        z-index: -9;
        background-color: #f2bdf5;
        border: 10px solid #f2bdf5;
        border-radius: 10px;
    }

    div.cur-v3 {
        grid-area: 3 / 5 / 8 / 6;
        background-color: grey;
        z-index: -9;
        border: 10px solid grey;
        border-radius: 10px;
    }

    div.cur-v4 {
        grid-area: 3 / 6 / 8 / 7;
        background-color: #dcd7d7;
        z-index: -9;
        border: 10px solid #dcd7d7;
        border-radius: 10px;
    }
}

@media (min-width:992px) {
    div.con-v1 {
        grid-area: 9 / 2 / 14 / 3;
        background-color: purple;
        z-index: -9;
    }

    div.con-v2 {
        grid-area: 9 / 3 / 14 / 4;
        z-index: -9;
        background-color: #f2bdf5;
    }

    div.con-v3 {
        grid-area: 9 / 4 / 14 / 5;
        background-color: grey;
        z-index: -9;
    }

    div.con-v4 {
        grid-area: 9 / 5 / 14 / 6;
        background-color: #dcd7d7;
        z-index: -9;
    }

    div.cur-v1 {
        grid-area: 3 / 3 /8 / 4;
        background-color: purple;
        z-index: -9;
        border-radius: 10px;
        border: 10px purple solid;
    }

    div.cur-v2 {
        grid-area: 3 / 4 / 8 / 5;
        z-index: -9;
        background-color: #f2bdf5;
        border: solid #f2bdf5 10px;
        border-radius: 10px;
    }

    div.cur-v3 {
        grid-area: 3/ 5 / 8 / 6;
        background-color: grey;
        z-index: -9;
        border: 10px solid grey;
        border-radius: 10px;
    }

    div.cur-v4 {
        grid-area: 3 / 6 / 8 / 7;
        background-color: #dcd7d7;
        z-index: -9;
        border: 10px solid #dcd7d7;
        border-radius: 10px;
    }
}

p.ver-light {
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

p.ver-dark {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

@media (min-width:1px) and (max-width:399px) {
    div.let-z {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: auto auto auto auto 10px;
        grid-gap: 5px;
        grid-area: 27 / content / 28 / content;
        grid-template-areas: 'cur-z-v2 text' 'cur-z-v1 text' 'con-z-v2 text' 'con-z-v1 text' '. .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.let-z {
        display: grid;
        grid-template-columns: 120px 120px 1fr;
        grid-template-rows: auto auto 10px;
        grid-gap: 10px;
        grid-area: 27 / content / 28 / content;
        grid-template-areas: 'cur-z-v2 con-z-v2 text' 'cur-z-v1 con-z-v1 text' '. . .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.let-z {
        display: grid;
        grid-template-columns: 120px 120px 1fr;
        grid-template-rows: auto auto 10px;
        grid-gap: 10px;
        grid-area: 27 / content / 28 / content;
        grid-template-areas: 'cur-z-v2 con-z-v2 text' 'cur-z-v1 con-z-v1 text' '. . .';
    }
}

@media (min-width:992px) {
    div.let-z {
        display: grid;
        grid-template-columns: 120px 120px 1fr;
        grid-template-rows: auto auto 10px;
        grid-gap: 10px;
        grid-area: 27 / content / 28 / content;
        grid-template-areas: 'cur-z-v2 con-z-v2 text' 'cur-z-v1 con-z-v1 text' '. . .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    iframe.video {
        overflow: hidden;
        grid-area: video;
        width: 340px;
        height: 192px;
    }

    div.video {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 'video';
    }

    div.atg {
        display: grid;
        grid-template-columns: 50px 140px 140px auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-area: 21 / content / 22 / content;
        grid-template-areas: 'step1 image1 text1 text1' 'step2 image2 text2 text2' 'step3 image3a text3 text3' '. image3b text3 text3' 'step4 image4 text4 text4' 'step5 image5 text5 text5';
    }
}

@media (min-width:400px) and (max-width:767px) {
    iframe.video {
        overflow: hidden;
        grid-area: video;
        width: 340px;
        height: 192px;
    }

    div.video {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. video .';
    }

    div.atg {
        display: grid;
        grid-template-columns: 50px 140px 140px auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-gap: 10px;
        grid-area: 21 / content / 22 / content;
        grid-template-areas: 'step1 image1 text1 text1' 'step2 image2 text2 text2' 'step3 image3a text3 text3' '. image3b text3 text3' 'step4 image4 text4 text4' 'step5 image5 text5 text5';
    }
}

@media (min-width:768px) and (max-width:991px) {
    iframe.video {
        overflow: hidden;
        grid-area: video;
        width: 680px;
        height: 383px;
    }

    div.video {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. video .';
    }

    div.atg {
        display: grid;
        grid-template-columns: 50px 140px 140px auto;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
        grid-area: 21 / content / 22 / content;
        grid-template-areas: 'step1 image1 text1 text1' 'step2 image2 text2 text2' 'step3 image3a image3b text3' 'step4 image4 text4 text4' 'step5 image5 text5 text5';
    }
}

@media (min-width:992px) {
    iframe.video {
        overflow: hidden;
        grid-area: video;
        width: 680px;
        height: 383px;
    }

    div.video {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. video .';
    }

    div.atg {
        display: grid;
        grid-template-columns: 50px 140px 140px auto;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 10px;
        grid-area: 21 / content / 22 / content;
        grid-template-areas: 'step1 image1 text1 text1' 'step2 image2 text2 text2' 'step3 image3a image3b text3' 'step4 image4 text4 text4' 'step5 image5 text5 text5';
    }
}

p.step {
    font-size: 40px;
    justify-self: center;
    font-weight: bold;
}

@media (min-width:1px) and (max-width:399px) {
    div.windscreen {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: '. stage1 .' '. arrow1 .' '. stage2 .' '. arrow2 .' '. stage3 .';
        grid-area: 14 / content / 15 / content;
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.windscreen {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: '. stage1 .' '. arrow1 .' '. stage2 .' '. arrow2 .' '. stage3 .';
        grid-area: 14 / content / 15 / content;
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.windscreen {
        display: grid;
        grid-template-columns: 1fr auto auto auto auto auto 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. stage1 arrow1 stage2 arrow2 stage3 .';
        grid-area: 14 / content / 15 / content;
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.windscreen {
        display: grid;
        grid-template-columns: 1fr auto auto auto auto auto 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. stage1 arrow1 stage2 arrow2 stage3 .';
        grid-area: 14 / content / 15 / content;
        grid-gap: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    img.arrow1 {
        grid-area: arrow1;
        justify-self: center;
        align-self: center;
        transform: rotateZ(90deg);
    }
}

@media (min-width:400px) and (max-width:767px) {
    img.arrow1 {
        grid-area: arrow1;
        justify-self: center;
        align-self: center;
        transform: rotateZ(90deg);
    }
}

@media (min-width:768px) and (max-width:991px) {
    img.arrow1 {
        grid-area: arrow1;
        justify-self: center;
        align-self: center;
    }
}

@media (min-width:992px) {
    img.arrow1 {
        grid-area: arrow1;
        justify-self: center;
        align-self: center;
    }
}

@media (min-width:1px) and (max-width:399px) {
    img.arrow2 {
        grid-area: arrow2;
        justify-self: center;
        align-self: center;
        transform: rotateZ(90deg);
    }
}

@media (min-width:400px) and (max-width:767px) {
    img.arrow2 {
        grid-area: arrow2;
        justify-self: center;
        align-self: center;
        transform: rotateZ(90deg);
    }
}

@media (min-width:768px) and (max-width:991px) {
    img.arrow2 {
        grid-area: arrow2;
        justify-self: center;
        align-self: center;
    }
}

@media (min-width:992px) {
    img.arrow2 {
        grid-area: arrow2;
        justify-self: center;
        align-self: center;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.mtg {
        display: grid;
        grid-template-columns: 1fr 120px 1fr 120px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. righthand . lefthand .' '. rightgrip . leftgrip .' 'text text text text text' '. . . . .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.mtg {
        display: grid;
        grid-template-columns: 1fr 120px 1fr 120px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. righthand . lefthand .' '. rightgrip . leftgrip .' 'text text text text text' '. . . . .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.mtg {
        display: grid;
        grid-template-columns: 1fr 120px 20px auto 20px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. righthand . . . lefthand .' '. rightgrip . text . leftgrip .' '. . . . . . .';
    }
}

@media (min-width:992px) {
    div.mtg {
        display: grid;
        grid-template-columns: 1fr 120px 20px auto 20px 120px 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. righthand . . . lefthand .' '. rightgrip . text . leftgrip .' '. . . . . . .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.str4 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto 10px;
        grid-template-areas: 'title' 'posture' 'bilateral' 'sensory' 'hand' '.';
        grid-gap: 5px;
    }

    div.str3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto 10px;
        grid-template-areas: 'title' 'bilateral' 'sensory' 'hand' '.';
        grid-gap: 5px;
    }

    div.str2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title' 'bilateral' 'hand' '.';
        grid-gap: 5px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.str4 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto 10px;
        grid-template-areas: 'title' 'posture' 'bilateral' 'sensory' 'hand' '.';
        grid-gap: 5px;
    }

    div.str3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto 10px;
        grid-template-areas: 'title' 'bilateral' 'sensory' 'hand' '.';
        grid-gap: 5px;
    }

    div.str2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title' 'bilateral' 'hand' '.';
        grid-gap: 5px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.str4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title title' 'posture sensory' 'bilateral hand' '. .';
        grid-gap: 5px;
    }

    div.str3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title title' 'bilateral hand' 'sensory .' '. .';
        grid-gap: 5px;
    }

    div.str2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 10px;
        grid-template-areas: 'title title' 'bilateral hand' '. .';
        grid-gap: 5px;
    }
}

@media (min-width:992px) {
    div.str4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title title' 'posture sensory' 'bilateral hand' '. .';
        grid-gap: 5px;
    }

    div.str3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 10px;
        grid-template-areas: 'title title' 'bilateral hand' 'sensory .' '. .';
        grid-gap: 5px;
    }

    div.str2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 10px;
        grid-template-areas: 'title title' 'bilateral hand' '. .';
        grid-gap: 5px;
    }
}

li.post {
    grid-area: posture;
    color: #00ff00;
    font-size: 20px;
    font-weight: bold;
}

li.bilat {
    grid-area: bilateral;
    color: #0000ff;
    font-size: 20px;
    font-weight: bold;
}

li.sens {
    grid-area: sensory;
    color: #ff00ff;
    font-size: 20px;
    font-weight: bold;
}

li.han {
    grid-area: hand;
    color: #ff0000;
    font-size: 20px;
    font-weight: bold;
}

@media (min-width:1px) and (max-width:399px) {
    div.activities {
        display: grid;
        grid-template-columns: 180px 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: 'act1 .' 'act2 .' 'act3 .' 'act4 .' '. .';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.activities {
        display: grid;
        grid-template-columns: 200px 200px 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'act1 act2 .' 'act3 act4 .' '. . .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.activities {
        display: grid;
        grid-template-columns: 200px 200px 200px 200px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'act1 act2 act3 . .' 'act4 . . . .';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.activities {
        display: grid;
        grid-template-columns: 200px 200px 200px 200px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'act1 act2 act3 act4 .' '. . . . .';
        grid-gap: 10px;
    }
}

div.act {
    border: 5px solid;
    padding: 5px;
    margin: 10px;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'img text';
    grid-gap: 10px;
}

@media (min-width:992px) {
    div.about {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. about who what .';
        grid-gap: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.about {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: '. about .' '. who .' '. what .';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.about {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. about about about .' '. who . what .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.about {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: '. about who what .';
        grid-gap: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.pgdiff {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'handimg gripimg' 'handtxt griptxt' 'altimg altimg' 'alttxt alttxt';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.pgdiff {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: minmax(150px, auto) minmax(150px, auto);
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'handimg gripimg' 'handtxt griptxt' 'altimg altimg' 'alttxt alttxt';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.pgdiff {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. handimg . gripimg . altimg .' '. handtxt . griptxt . alttxt .' '. . . . . . .' '. . . . . . .';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.pgdiff {
        grid-area: 3 / content / 4 / content;
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. handimg . gripimg . altimg .' '. handtxt . griptxt . alttxt .';
        grid-gap: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.pgex {
        display: grid;
        grid-template-columns: 150px 150px;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: 'clweb1img clweb2img' 'clwebtxt clwebtxt' 'hookimg hookimg' 'hooktxt hooktxt';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.pgex {
        display: grid;
        grid-template-columns: 1fr 150px 150px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. clweb1img clweb2img .' '. clwebtxt clwebtxt .' '. hookimg hookimg .' '. hooktxt hooktxt .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.pgex {
        display: grid;
        grid-template-columns: 1fr minmax(150px, auto) minmax(150px, auto) 1fr minmax(150px, auto) 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. clweb1img clweb2img . hookimg .' '. clwebtxt clwebtxt . hooktxt .';
    }
}

@media (min-width:992px) {
    div.pgex {
        display: grid;
        grid-template-columns: 1fr minmax(150px, auto) minmax(150px, auto) 1fr minmax(150px, auto) 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. clweb1img clweb2img . hookimg .' '. clwebtxt clwebtxt . hooktxt .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.exppg {
        grid-area: 3 / content/ 4 / content;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: 'ppg1 ppg2' 'ppg3 ppg4' 'ppg5 .' '. .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.exppg {
        grid-area: 3 / content/ 4 / content;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. ppg1 ppg2 .' '. ppg3 ppg4 .' '. ppg5 . .' '. . . .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.exppg {
        grid-area: 3 / content/ 4 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
        grid-template-areas: '. ppg1 ppg2 ppg3 .' '. ppg4 ppg5 . .' '. . . . .';
    }
}

@media (min-width:992px) {
    div.exppg {
        grid-area: 3 / content/ 4 / content;
        display: grid;
        grid-template-columns: 1fr auto auto auto auto auto 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. ppg1 ppg2 ppg3 ppg4 ppg5 .' '. . . . . . .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.aids {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: minmax(100px, auto) minmax(100px, auto);
        grid-gap: 20px;
        margin-bottom: 10px;
        grid-template-areas: '. aid1 aid2 .' '. aid3 aid4 .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.aids {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: minmax(100px, auto) minmax(100px, auto);
        grid-gap: 20px;
        margin-bottom: 10px;
        grid-template-areas: '. aid1 aid2 .' '. aid3 aid4 .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.aids {
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: minmax(100px, auto);
        grid-gap: 20px;
        margin-bottom: 10px;
        grid-template-areas: '. aid1 aid2 aid3 aid4 .';
    }
}

@media (min-width:992px) {
    div.aids {
        display: grid;
        grid-template-columns: 1fr auto auto auto auto 1fr;
        grid-template-rows: minmax(100px, auto);
        grid-gap: 20px;
        margin-bottom: 10px;
        grid-template-areas: '. aid1 aid2 aid3 aid4 .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.open {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 5px;
        grid-template-areas: '. img .' '. arrow .' '. text .' '. . .';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.open {
        display: grid;
        grid-template-columns: 1fr 120px 50px auto 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 5px;
        grid-template-areas: '. . . img .' '. text arrow img .' '. . . . .';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.open {
        display: grid;
        grid-template-columns: 1fr 150px 50px 1fr 200px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. text . img . .' '. . . . . .';
    }
}

@media (min-width:992px) {
    div.open {
        display: grid;
        grid-template-columns: 1fr 150px 50px 1fr 200px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. text . img . .' '. . . . . .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    img.open {
        grid-area: arrow;
        position: relative;
        bottom: 55px;
        transform: rotate(-90deg);
    }
}

@media (min-width:400px) and (max-width:767px) {
    img.open {
        grid-area: arrow;
        align-self: center;
        position: relative;
        bottom: 40px;
        transform: rotate(-38deg);
    }
}

@media (min-width:768px) and (max-width:991px) {
    img.open {
        grid-area: 1 / 3 / 2 / 4;
        align-self: center;
        position: relative;
        right: 0px;
        left: -20px;
        top: -8px;
    }
}

@media (min-width:992px) {
    img.open {
        grid-area: 1 / 3 / 2 / 4;
        align-self: center;
        position: relative;
        right: 0px;
        left: -20px;
        top: -8px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.about1 {
        display: grid;
        grid-template-columns: 1fr 300px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. map .' 'text text text';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.about1 {
        display: grid;
        grid-template-columns: 1fr 370px 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        grid-template-areas: '. map .' 'text text text';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.about1 {
        display: grid;
        grid-template-columns: 1fr 520px;
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: 'text map';
    }
}

@media (min-width:992px) {
    div.about1 {
        display: grid;
        grid-template-columns: 1fr 520px;
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: 'text map';
    }
}

@media (min-width:1px) and (max-width:399px) {
    iframe.about {
        width: 300px;
        height: 300px;
        grid-area: map;
    }
}

@media (min-width:400px) and (max-width:767px) {
    iframe.about {
        width: 370px;
        height: 370px;
        grid-area: map;
    }
}

@media (min-width:768px) and (max-width:991px) {
    iframe.about {
        width: 520px;
        height: 520px;
        grid-area: map;
    }
}

@media (min-width:992px) {
    iframe.about {
        width: 520px;
        height: 520px;
        grid-area: map;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.sho {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' '.';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.sho {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' '.';
        grid-gap: 15px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.sho {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: 'title title' 'act1 video' 'act2 act5' 'act3 act6' 'act4 act6';
        grid-gap: 15px;
    }
}

@media (min-width:992px) {
    div.sho {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        grid-template-areas: 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' 'act7' 'act8';
        grid-gap: 15px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.sho1 {
        grid-area: 15 / content / 16 / content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' 'act7' '.';
        grid-gap: 5px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.sho1 {
        grid-area: 15 / content / 16 / content;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'video' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' 'act7' '.';
        grid-gap: 5px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.sho1 {
        grid-area: 15 / content / 16;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas: '. title title .' '. act1 video .' '. . video .' '. . video .' '. act2 act5 .' '. act3 act6 .' '. act4 . .';
        grid-gap: 5px;
        display: grid;
    }
}

@media (min-width:992px) {
    div.sho1 {
        grid-area: 16 / content / 16 / content;
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 75px 170px 105px auto auto auto;
        grid-template-areas: 'title title' 'act1 video' '. video' 'act2 act5' 'act3 act6' 'act4 .';
        grid-gap: 15px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.sho-vid {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-gap: 5px;
        grid-template-areas: 'vid1' 'txt1' 'vid2' 'txt2';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.sho-vid {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'vid1 vid2' 'txt1 txt2';
        justify-self: center;
        grid-gap: 15px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.sho-vid {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: 1fr 180px 180px 1fr;
        grid-template-rows: 40px auto auto;
        grid-template-areas: '. . . .' '. vid1 vid2 .' '. txt1 txt2 .';
    }
}

@media (min-width:992px) {
    div.sho-vid {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: 1fr 180px 180px 1fr;
        grid-template-rows: 40px auto auto;
        grid-template-areas: '. . . .' '. vid1 vid2 .' '. txt1 txt2 .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.sho-vid1 {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 40px auto auto auto auto auto auto;
        grid-gap: 5px;
        grid-template-areas: '.' 'vid1' 'txt1' 'vid2' 'txt2' 'vid3' 'txt3';
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.sho-vid1 {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 40px 160px auto auto auto;
        grid-template-areas: '. .' 'vid1 vid2' 'txt1 txt2' 'vid3 .' 'txt3 .';
        justify-self: center;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.sho-vid1 {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 40px auto auto auto auto;
        grid-template-areas: '. .' 'vid1 vid2' 'txt1 txt2' 'vid3 .' 'txt3 .';
    }
}

@media (min-width:992px) {
    div.sho-vid1 {
        grid-area: video;
        background-color: #66ff66;
        border: 7px solid #ff0000;
        border-radius: 7px;
        display: grid;
        grid-template-columns: 1fr 180px 180px 180px 1fr;
        grid-template-rows: 40px auto auto;
        grid-template-areas: '. . . . .' '. vid1 vid2 vid3 .' '. txt1 txt2 txt3 .';
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.mid {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' '.';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.mid {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' '.';
        grid-gap: 15px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.mid {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 'title title' 'video act5' 'act1 act5' 'act2 act5' 'act3 act6' 'act4 act6';
        grid-gap: 15px;
    }
}

@media (min-width:992px) {
    div.mid {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 75px auto auto auto auto auto;
        grid-template-areas: 'title title' 'video act5' 'act1 act5' 'act2 act5' 'act3 act6' 'act4 act6';
        grid-gap: 15px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.handw {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4' 'act5';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.handw {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 'title' 'video' 'act1' 'act2' 'act3' 'act4';
        grid-gap: 15px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.handw {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'title title' 'act1 video' 'act2 act4' 'act3 act4';
        grid-gap: 15px;
    }
}

@media (min-width:992px) {
    div.handw {
        grid-area: 9 / content / 10 / content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 75px auto auto auto;
        grid-template-areas: 'title title' 'act1 video' 'act2 act4' 'act3 act4';
        grid-gap: 15px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.scheme {
        grid-area: 3 / 3 / 4 / 5;
        display: grid;
        grid-template-columns: 1fr 144px 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas: '. foundation-stage .' '. key-stage-1 .' '. key-stage-2 .' '. key-stage-3 .' '. review .' '. buy .' '. . .';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.scheme {
        grid-area: 3 / 3 / 4 / 5;
        display: grid;
        grid-template-columns: 1fr 144px 144px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. foundation-stage buy .' '. key-stage-1 key-stage-2 .' '. key-stage-3 review .' '. . . .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.scheme {
        grid-area: 3 / 3 / 4 / 5;
        display: grid;
        grid-template-columns: 1fr 144px 144px 144px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. foundation-stage key-stage-1 key-stage-2 .' '. review key-stage-3 buy .';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.scheme {
        grid-area: 3 / 3 / 4 / 5;
        display: grid;
        grid-template-columns: 1fr 144px 144px 144px 144px 144px 144px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. review foundation-stage key-stage-1 key-stage-2 key-stage-3 buy .' '. . . . . . . .';
        grid-gap: 10px;
    }
}

div.vidplay {
    display: grid;
    grid-template-columns: 1fr 80px;
    grid-template-rows: auto;
    grid-template-areas: 'text button';
    grid-area: 3 / title / 4 / title;
}

.wuvid2.sh {
    border: 5px solid #66ff66;
}

.ml {
    border: 5px solid #5af7d2;
}

.wuvid2.ml {
    border: 5px solid #5af7d2;
}

.wr {
    border: 5px solid #cc99ff;
}

.wuvid2.wr {
    border: 5px solid #cc99ff;
}

.th {
    border: 5px solid #ff66cc;
}

.ha {
    border: 5px solid #ff6600;
}

.wuvid2.ha {
    border: 5px solid #ff6600;
}

a.about {
    align-self: center;
    justify-self: center;
    grid-area: about;
}

a.who {
    align-self: center;
    justify-self: center;
    grid-area: who;
}

a.what {
    align-self: center;
    justify-self: center;
    grid-area: what;
}

a.ks2 {
    grid-area: key-stage-2;
    margin: auto;
}

a.ks1 {
    grid-area: key-stage-1;
    margin: auto;
}

a.fs {
    grid-area: foundation-stage;
    margin: auto;
}

a.eng {
    grid-area: England;
}

a.ni {
    grid-area: Northern-Ireland;
}

a.sco {
    grid-area: Scotland;
}

a.wal {
    grid-area: Wales;
}

div.us {
    display: grid;
    grid-template-columns: 0.2fr 1fr 0.5fr 0.2fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: '. text image .';
    margin-bottom: 15px;
}

.row6 {
    grid-area: 6 / content / 7 / content;
}

a.mode {
    grid-area: 1 / 2 / 2 / 3;
}

.row9 {
    grid-area: 9 / content / 10 / content;
}

.row10 {
    grid-area: 10 / content / 11 / content;
}

.row13 {
    grid-area: 13 / content / 14 / content;
}

.na {
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'button text';
    grid-gap: 25px;
}

.section {
    grid-area: text;
}

h2.section {
    text-align: left;
}

.button {
    grid-area: button;
    margin-bottom: 10px;
}

div.picture1 {
    display: grid;
    grid-template-columns: 150px 50px 1fr;
    grid-template-rows: auto auto auto auto auto;
}

img.colour {
    justify-self: center;
    grid-area: 2 / 1 / 3 / 3;
}

.size {
    width: 144px;
    height: 124px;
}

.row6: {
    grid-area: 6 / content / 7 / content;
}

.row8 {
    grid-area: 8 / content / 9 / content;
}

.row19 {
    grid-area: 19 / content / 20 / content;
}

.choice1 {
    grid-area: choice1;
}

img.w1 {
    grid-area: w1;
}

img.x1 {
    grid-area: x1;
}

img.z1 {
    grid-area: z1;
}

.choice2 {
    grid-area: choice2;
}

img.w2 {
    grid-area: w2;
}

img.x2 {
    grid-area: x2;
}

img.z2 {
    grid-area: z2;
}

.choice3 {
    grid-area: choice3;
}

img.w3 {
    grid-area: w3;
}

img.x3 {
    grid-area: x3;
}

img.z3 {
    grid-area: z3;
}

.choice4 {
    grid-area: choice4;
}

img.w4 {
    grid-area: w4;
}

img.x4 {
    grid-area: x4;
}

img.z4 {
    grid-area: z4;
}

img.oweb {
    justify-self: center;
    grid-area: img;
}

.row4 {
    grid-area: 4 / content / 5 / content;
}

.alt-letters {
    grid-area: 1 / 4 / 2 / 5;
    text-decoration: none;
    color: #073155;
}

.routea {
    grid-area: routea;
    justify-self: center;
}

.routeb {
    grid-area: routeb;
    justify-self: center;
}

.routec {
    grid-area: routec;
    justify-self: center;
}

.routed {
    grid-area: routed;
    justify-self: center;
}

img.a1 {
    grid-area: astage1;
}

img.a2 {
    grid-area: astage2;
}

img.a3 {
    grid-area: astage3;
}

img.a4 {
    grid-area: astage4;
}

img.b1 {
    grid-area: bstage1;
}

img.b2 {
    grid-area: bstage2;
}

img.b3 {
    grid-area: bstage3;
}

img.b4 {
    grid-area: bstage4;
}

img.c1 {
    grid-area: cstage1;
}

img.c2 {
    grid-area: cstage2;
}

img.c3 {
    grid-area: cstage3;
}

img.c4 {
    grid-area: cstage4;
}

img.d1 {
    grid-area: dstage1;
}

img.d2 {
    grid-area: dstage2;
}

img.d3 {
    grid-area: dstage3;
}

img.d4 {
    grid-area: dstage4;
}

img.aa1 {
    grid-area: arrowa1;
}

img.aa2 {
    grid-area: arrowa2;
}

img.aa3 {
    grid-area: arrowa3;
}

img.ab1 {
    grid-area: arrowb1;
}

img.ab2 {
    grid-area: arrowb2;
}

img.ab3 {
    grid-area: arrowb3;
}

img.ac1 {
    grid-area: arrowc1;
}

img.ac2 {
    grid-area: arrowc2;
}

img.ac3 {
    grid-area: arrowc3;
}

img.ad1 {
    grid-area: arrowd1;
}

img.ad2 {
    grid-area: arrowd2;
}

img.ad3 {
    grid-area: arrowd3;
}

img.dom1 {
    grid-area: 1 / 1 / 3 / 2;
    margin: auto;
}

img.dom2 {
    grid-area: 5 / 1 / 6 / 2;
    width: 100px;
    margin: auto;
}

div.games {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: 'stickman text';
}

img.games {
    max-width: 276px;
    width: 100%;
    height: auto;
    grid-area: stickman;
}

.row20 {
    grid-area: 20 / content / 21 / content;
}

.row21 {
    grid-area: 21 / content / 22 / content;
}

.row22 {
    grid-area: 22 / content / 23 / content;
}

.row23 {
    grid-area: 23 / content / 24 / content;
}

.row24 {
    grid-area: 24 / content / 25 / content;
}

.row25 {
    grid-area: 25 / content / 26 / content;
}

.row26 {
    grid-area: 26 / content / 27 / content;
}

.row27 {
    grid-area: 27 / content / 28 / content;
}

.row28 {
    grid-area: 28 / content / 29 / content;
}

.row29 {
    grid-area: 29 / content / 30 / content;
}

.row30 {
    grid-area: 30 / content / 31 / content;
}

.row31 {
    grid-area: 31 / content / 32 / content;
}

.row32 {
    grid-area: 32 / content / 33 / content;
}

.row33 {
    grid-area: 33 / content / 34 / content;
}

.row34 {
    grid-area: 34 / content / 35 / content;
}

.row35 {
    grid-area: 35 / content / 36 / content;
}

.row37 {
    grid-area: 37 / content / 38 / content;
}

.row39 {
    grid-area: 39 / content / 40 / content;
}

.row40 {
    grid-area: 40 / content / 41 / content;
}

.row41 {
    grid-area: 41 / content / 42 / content;
}

.row42 {
    grid-area: 42 / content / 43 / content;
}

.row43 {
    grid-area: 43 / content / 44 / content;
}

.row44 {
    grid-area: 44 / content / 45 / content;
}

.row45 {
    grid-area: 45 / content / 46 / content;
}

.row46 {
    grid-area: 46 / content / 47 / content;
}

.row47 {
    grid-area: 47 / content / 48 / content;
}

.row48 {
    grid-area: 48 / content / 49 / content;
}

.row49 {
    grid-area: 49 / content / 50 / content;
}

.row50 {
    grid-area: 50 / content / 51 / content;
}

.row51 {
    grid-area: 51 / content / 52 / content;
}

.row52 {
    grid-area: 52 / content / 53 / content;
}

.row53 {
    grid-area: 53 / content / 54 / content;
}

.row54 {
    grid-area: 54 / content / 55 / content;
}

.row55 {
    grid-area: 55 / content / 56 / content;
}

.row56 {
    grid-area: 56 / content / 57 / content;
}

.row57 {
    grid-area: 57 / content / 58 / content;
}

.row58 {
    grid-area: 58 / content / 59 / content;
}

.row59 {
    grid-area: 59 / content / 60 / content;
}

.row60 {
    grid-area: 60 / content / 61 / content;
}

.row61 {
    grid-area: 61 / content / 62 / content;
}

.row62 {
    grid-area: 62 / content / 63 / content;
}

.row63 {
    grid-area: 63 / content / 64 / content;
}

.row64 {
    grid-area: 64 / content / 65 / content;
}

.row65 {
    grid-area: 65 / content / 66 / content;
}

.row66 {
    grid-area: 66 / content / 67 / content;
}

.row67 {
    grid-area: 67 / content / 68 / content;
}

.row68 {
    grid-area: 68 / content / 69 / content;
}

.row69 {
    grid-area: 69 / content / 70 / content;
}

.row70 {
    grid-area: 70 / content / 71 / content;
}

.row71 {
    grid-area: 71 / content / 72 / content;
}

.row72 {
    grid-area: 72 / content / 73 / content;
}

.row73 {
    grid-area: 73 / content / 74 / content;
}

.row74 {
    grid-area: 74 / content / 75 / content;
}

.row75 {
    grid-area: 75 / content / 76 / content;
}

td {
    border: 5px solid black;
}

th {
    border: 5px solid black;
}

tr {
    border: 5px solid black;
}

.letter-version h3 {
    grid-area: title;
    text-align: center;
}

.cw1 {
    grid-area: cursive-w1;
}

.cx1 {
    grid-area: cursive-x1;
}

.cz1 {
    grid-area: cursive-z1;
}

.cw2 {
    grid-area: cursive-w2;
}

.cx2 {
    grid-area: cursive-x2;
}

.cz2 {
    grid-area: cursive-z2;
}

.cw3 {
    grid-area: cursive-w3;
}

.cx3 {
    grid-area: cursive-x3;
}

.cz3 {
    grid-area: cursive-z3;
}

.cw4 {
    grid-area: cursive-w4;
}

.cx4 {
    grid-area: cursive-x4;
}

.cz4 {
    grid-area: cursive-z4;
}

.ccw1 {
    grid-area: con-cur-w1;
}

.ccx1 {
    grid-area: con-cur-x1;
}

.ccz1 {
    grid-area: con-cur-z1;
}

.ccw2 {
    grid-area: con-cur-w2;
}

.ccx2 {
    grid-area: con-cur-x2;
}

.ccz2 {
    grid-area: con-cur-z2;
}

.ccw3 {
    grid-area: con-cur-w3;
}

.ccx3 {
    grid-area: con-cur-x3;
}

.ccz3 {
    grid-area: con-cur-z3;
}

.ccw4 {
    grid-area: con-cur-w4;
}

.ccx4 {
    grid-area: con-cur-x4;
}

.ccz4 {
    grid-area: con-cur-z4;
}

.letter-version.cc {
    grid-area: con-cur;
}

.cur-z-v2 {
    grid-area: cur-z-v2;
}

.cur-z-v1 {
    grid-area: cur-z-v1;
}

.cc-z-v2 {
    grid-area: con-z-v2;
}

.cc-z-v1 {
    grid-area: con-z-v1;
}

.ga-text {
    grid-area: text;
}

p.open {
    grid-area: 3 / content / 4 / content;
}

.row12 {
    grid-area: 12 / content / 13 / content;
}

.row14 {
    grid-area: 14 / content / 15 / content;
}

.row16 {
    grid-area: 16 / content / 17 / content;
}

.row18 {
    grid-area: 18 / content / 19 / content;
}

img.grip1 {
    border: 5px solid #a4aca4;
    grid-area: image1;
}

img.grip2 {
    grid-area: image2;
}

img.grip3a {
    border: 5px solid #a4aca4;
    grid-area: image3a;
}

img.grip3b {
    border: 5px solid #a4aca4;
    grid-area: image3b;
}

img.grip4 {
    border: 5px solid #a4aca4;
    grid-area: image4;
}

img.grip5 {
    border: 5px solid #a4aca4;
    grid-area: image5;
}

img.courses {
    width: 100%;
    height: auto;
    border: 5px solid #050571;
}

div.row9.sitting {
    display: grid;
    grid-template-columns: 0.25fr;
}

ul.div.text {
    grid-area: 1 / 2 / 2 / 3;
}

p.cv2 {
    grid-area: cur-ver-2;
}

p.ccv1 {
    grid-area: con-ver-1;
}

p.ccv2 {
    grid-area: con-ver-2;
}

p.cv3 {
    grid-area: cur-ver-3;
}

p.cv1 {
    grid-area: cur-ver-1;
}

p.cv4 {
    grid-area: cur-ver-4;
}

p.ccv3 {
    grid-area: con-ver-3;
}

p.ccv4 {
    grid-area: con-ver-4;
}

h4.fs-manual {
    text-align: center;
    grid-area: 11 / content / 12 / content;
}

div.detail {
    grid-area: det;
}

div.desc {
    grid-area: desc;
}

div.col1 {
    grid-area: desc;
}

img.us2 {
    grid-area: image;
    margin: auto;
    border: 5px solid #999999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    max-width: 180px;
    width: 100%;
    height: auto;
}

img.sscol2 {
    grid-area: img;
    width: 100%;
    height: auto;
    border: 5px solid #999999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    max-width: 500px;
    margin: auto;
}

img.col2 {
    grid-area: img;
    width: 100%;
    height: auto;
    border: 5px solid #999999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

h4.pcard {
    text-align: center;
    grid-area: 18 / content / 19 / content;
}

@media (min-width:1px) and (max-width:399px) {
    div.coltm2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'desc desc' 'img img' 'det det' 'other other';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.coltm2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'desc desc' 'img img' 'det det' 'other other';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.coltm2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'desc img' 'det img' 'other img';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.coltm2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'desc img' 'det img' 'other img';
        grid-gap: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    div.colss2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'desc' 'img' 'det';
        grid-gap: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    div.colss2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'desc' 'img' 'det';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.colss2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'desc img' 'det img';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.colss2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'desc img' 'det img';
        grid-gap: 10px;
    }
}

div.colx2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.carousel.slide.img2 {
    width: 100%;
    height: auto;
    min-width: 120px;
    grid-area: img;
}

.carousel.slide.col2 {
    width: 100%;
    height: auto;
    min-width: 120px;
}

h4.center {
    text-align: center;
}

.row29 {
    grid-area: 29 / content / 30 / content;
}

.row32 {
    grid-area: 32 / content / 33 / content;
}

.row34 {
    grid-area: 34 / content / 35 / content;
}

.row36 {
    grid-area: 36 / content / 37 / content;
}

.row38 {
    grid-area: 38 / content / 39 / content;
}

div.sho-stab {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: 'act1' 'act2' 'act3' 'act4' 'act5' 'act6';
    grid-gap: 15px;
}

div.act5 {
    grid-area: act5;
}

.sh {
    border: 5px solid #66ff66;
}

div.act7 {
    grid-area: act7;
}

div.act6 {
    grid-area: act6;
}

div.mid-line {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: 'act1' 'act2' 'act3' 'act4' 'act5' 'act6';
    grid-gap: 15px;
}

div.act3 {
    grid-area: act3;
}

div.act4 {
    grid-area: act4;
}

div.wrist {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'act1' 'act2' 'act3' 'act4';
    grid-gap: 15px;
}

div.thumb {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: 'act1' 'act2' 'act3' 'act4' 'act5' 'act6' 'act7';
    grid-gap: 15px;
}

div.th.wuvid3 {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: auto auto;
    grid-template-areas: 'title video' 'text video';
    grid-gap: 10px;
}

div.wuhand {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'act1' 'act2' 'act3' 'act4';
    grid-gap: 15px;
}

.row5 {
    grid-area: 5 / content / 6 / content;
}

a.ph-button {
    grid-area: ph-button;
}

img.ph-image {
    grid-area: ph-image;
}

a.beg-but1 {
    grid-area: beg-but-1;
}

img.beg-img1 {
    grid-area: beg-img-1;
}

a.ref-but1 {
    grid-area: ref-but-1;
}

img.ref-img1 {
    grid-area: ref-img-1;
}

a.beg-but3 {
    grid-area: beg-but-3;
}

img.beg-img3 {
    grid-area: beg-img-3;
}

a.ref-but3 {
    grid-area: ref-but-3;
}

img.ref-img3 {
    grid-area: ref-img-3;
}

a.beg-but2 {
    grid-area: beg-but-2;
}

a.beg-but4 {
    grid-area: beg-but-4;
}

img.beg-img4 {
    grid-area: beg-img-4;
}

a.ref-but4 {
    grid-area: ref-but-4;
}

img.ref-img4 {
    grid-area: ref-img-4;
}

img.beg-img2 {
    grid-area: beg-img-2;
}

a.ref-but2 {
    grid-area: ref-but-2;
}

img.ref-img2 {
    grid-area: ref-img-2;
}

a.beg-but5 {
    grid-area: beg-but-5;
}

img.beg-img5 {
    grid-area: beg-img-5;
}

a.ref-but5 {
    grid-area: ref-but-5;
}

img.ref-img5 {
    grid-area: ref-img-5;
}

a.beg-but6 {
    grid-area: beg-but-6;
}

img.beg-img6 {
    grid-area: beg-img-6;
}

a.ref-but6 {
    grid-area: ref-but-6;
}

img.ref-img6 {
    grid-area: ref-img-6;
}

a.cur-but {
    grid-area: cur-but;
}

img.cur-img {
    grid-area: cur-img;
}

a.con-but {
    grid-area: con-but;
}

img.con-img {
    grid-area: con-img;
}

.act1 {
    grid-area: act1;
}

img.fun {
    grid-area: img;
    align-self: center;
    border: 2px solid;
}

p.fun {
    grid-area: text;
    align-self: center;
}

.act2 {
    grid-area: act2;
}

.row7 {
    grid-area: 7 / content / 8 / content;
}

img.sit {
    width: 100%;
    height: auto;
    max-width: 666px;
    margin: auto;
    border: 5px solid black;
    padding-top: top;
}

img.flex {
    width: 100%;
    height: auto;
    max-width: 700px;
    margin: auto;
    border: 5px solid black;
    padding-top: top;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

a.down {
    grid-area: 1 / 3 / 2 / 4;
    justify-self: right;
}

img.down {
}

a.up {
    grid-area: 1 / 1 / 2 / 2;
}

div.down {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 10px;
}

img.row7 {
    grid-area: 7 /content / 8 / content;
}

p.text {
    grid-area: 1 / 2 / 2 / 3;
}

img.light {
    border: 5px solid #a4aca4;
}

p.boldright {
    grid: cursive-font;
    text-align: center;
    font-size: 20px;
    grid-area: righthand;
    font-weight: bold;
}

p.boldleft {
    text-align: center;
    font-size: 20px;
    grid-area: lefthand;
    font-weight: bold;
}

img.rgrip {
    grid-area: rightgrip;
}

p.textarea {
    grid-area: text;
}

img.lgrip {
    grid-area: leftgrip;
}

h5.bold {
    font-weight: bold;
}

.row15 {
    grid-area: 15 / content / 16 / content;
}

.row17 {
    grid-area: 17 / content / 18 / content;
}

p.handtxt {
    grid-area: handtxt;
    text-align: center;
    font-weight: bold;
}

p.griptxt {
    text-align: center;
    font-weight: bold;
    grid-area: griptxt;
}

p.alttxt {
    text-align: center;
    font-weight: bold;
    grid-area: alttxt;
}

a.handimg {
    grid-area: handimg;
}

a.gripimg {
    grid-area: gripimg;
}

a.altimg {
    grid-area: altimg;
}

img.hookimg {
    grid-area: hookimg;
    justify-self: center;
}

img.clweb2img {
    grid-area: clweb2img;
}

img.clweb1img {
    grid-area: clweb1img;
    position: relative;
    top: 53px;
    right: 0px;
    left: 124px;
    width: 140px;
}

img.web1img {
    grid-area: clweb1img;
}

p.clwebtxt {
    grid-area: clwebtxt;
    justify-self: center;
    font-weight: bold;
    font-size: 25px;
}

p.hooktxt {
    justify-self: center;
    font-weight: bold;
    font-size: 25px;
    grid-area: hooktxt;
}

p.oweb {
    grid-area: text;
    justify-self: center;
    align-self: center;
    font-weight: bold;
    font-size: 25px;
}

img.ppg1 {
    justify-self: center;
    grid-area: ppg1;
}

img.ppg5 {
    grid-area: ppg5;
    justify-self: center;
}

img.ppg4 {
    grid-area: ppg4;
    justify-self: center;
}

img.ppg2 {
    grid-area: ppg2;
    justify-self: center;
}

img.ppg3 {
    justify-self: center;
    grid-area: ppg3;
}

a.aid1 {
    grid-area: aid1;
    cursor: pointer;
}

a.aid2 {
    grid-area: aid2;
    cursor: pointer;
}

a.aid3 {
    grid-area: aid3;
    cursor: pointer;
}

a.aid4 {
    grid-area: aid4;
    cursor: pointer;
}

h3.title {
    grid-area: 1 / 1 / 2 / 2;
}

a.beg-but-1 {
    grid-area: beg-but-1;
}

img.beg-img-1 {
    grid-area: beg-img-1;
}

a.ref-but-1 {
    grid-area: ref-but-1;
}

img.ref-img-1 {
    grid-area: ref-img-1;
}

a.beg-but-2 {
    grid-area: beg-but-2;
}

img.beg-img-2 {
    grid-area: beg-img-2;
}

a.ref-but-2 {
    grid-area: ref-but-2;
}

img.ref-img-2 {
    grid-area: ref-img-2;
}

a.beg-but-3 {
    grid-area: beg-but-3;
}

img.beg-img-3 {
    grid-area: beg-img-3;
}

a.ref-but-3 {
    grid-area: ref-but-3;
}

img.ref-img-3 {
    grid-area: ref-img-3;
}

a.beg-but-4 {
    grid-area: beg-but-4;
}

img.beg-img-4 {
    grid-area: beg-img-4;
}

a.ref-but-4 {
    grid-area: ref-but-4;
}

img.ref-img-4 {
    grid-area: ref-img-4;
}

a.beg-but-5 {
    grid-area: beg-but-5;
}

img.beg-img-5 {
    grid-area: beg-img-5;
}

a.ref-but-5 {
    grid-area: ref-but-5;
}

img.ref-img-5 {
    grid-area: ref-img-5;
}

img.central {
    margin: 0 auto;
    display: block;
}

div.glos {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'let des';
    grid-gap: 10px;
}

p.expl {
    grid-area: text;
}

a.read {
    grid-area: read;
}

.carousel.us2 {
    grid-area: image;
    margin: auto;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    border-radius: 5px;
    width: 100%;
    max-width: 180px;
    height: auto;
}

.carousel.slide {
    grid-area: 1 / 2 / 3 / 4;
    margin-left: auto;
    margin-right: auto;
}

.carousel.web {
    grid-area: image;
    max-width: 220px;
    height: auto;
    align-self: center;
    justify-self: center;
    border: 5px solid #999999;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
    border-radius: 5px;
    width: 100%;
}

.row3 {
    grid-area: 3 / content / 4 / content;
}

.icon {
    border-radius: 10px;
    border: 10px solid #073155;
    box-shadow: 2px 2px 2px 2px rgba(193,189,189,0.75);
    padding: 2px;
}

p.aims {
    grid-area: text;
}

.pic1txt {
    grid-area: 1 / 1 / 2 / 4;
}

.pic2txt {
    grid-area: 2 / 3 / 3 / 4;
}

.pic3txt {
    grid-area: 3 / 1 / 4 / 4;
}

.pic4txt {
    grid-area: 4 / 3 / 5 / 4;
}

.gif {
    width: 144px;
    height: 124px;
}

.step1 {
    grid-area: step1;
}

.step2 {
    grid-area: step2;
}

.text2 {
    grid-area: text2;
}

.step3 {
    grid-area: step3;
}

.text3 {
    grid-area: text3;
}

.step4 {
    grid-area: step4;
}

.text4 {
    grid-area: text4;
}

.step5 {
    grid-area: step5;
}

.text5 {
    grid-area: text5;
}

.text1 {
    grid-area: text1;
}

a.review {
    grid-area: review;
}

a.hsfs {
    grid-area: foundation-stage;
}

a.hsks1 {
    grid-area: key-stage-1;
}

a.hsks2 {
    grid-area: key-stage-2;
}

a.hsbuy {
    grid-area: buy;
}

.row11 {
    grid-area: 11 / content / 12 / content;
}

.wind-1 {
    grid-area: stage1;
}

.wind-2 {
    grid-area: stage2;
}

.wind-3 {
    grid-area: stage3;
}

.letter-version.cur {
    grid-area: cursive;
}

.image4 {
    grid-area: image4;
}

.image5 {
    grid-area: image5;
}

.act4 {
    grid-area: act4;
}

.act3 {
    grid-area: act3;
}

div.ol.cc {
    grid-area: 8 / 2 / 14 / 6;
    outline: 2px solid black;
}

div.ol.cur {
    grid-area: 2 / 2 / 8 / 6;
    outline: 2px solid black;
}

@media (min-width:992px) {
    .letter-version.outline {
        grid-area: 1 / 2 / 10 / 8;
        border: solid 5px black;
        border-radius: 10px;
    }
}

@media (min-width:1px) and (max-width:399px) {
    .letter-version.outline {
        grid-area: 1 / 1 / 14 / 5;
        border: solid 5px black;
        border-radius: 10px;
    }
}

@media (min-width:400px) and (max-width:767px) {
    .letter-version.outline {
        grid-area: 1 / 2 / 14 / 6;
        border: solid 5px black;
        border-radius: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .letter-version.outline {
        grid-area: 1 / 2 / 10 / 8;
        border: solid 5px black;
        border-radius: 10px;
    }
}

@media (min-width:992px) {
    .letter-version.outline {
        grid-area: 1 / 2 / 10 / 8;
        border: solid 5px black;
        border-radius: 10px;
    }
}

a.picture {
    grid-area: picture;
}

a.lined {
    grid-area: lined;
}

@media (min-width:1px) and (max-width:399px) {
    div.paper {
        display: grid;
        grid-template-columns: 1fr 300px 1fr;
        grid-template-rows: auto auto 10px;
        grid-template-areas: '. picture .' '. lined .' '. . .';
        grid-gap: 25px;
    }

    .picture.paper {
        max-width: 300px;
    }
}

@media (min-width:400px) and (max-width:767px){
    div.paper {
        display: grid;
        grid-template-columns: 1fr 400px 1fr;
        grid-template-rows: auto auto 10px;
        grid-template-areas: '. picture .' '. lined .' '. . .';
        grid-gap: 10px;
    }

    .picture.paper {
        max-width: 400px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.paper {
        display: grid;
        grid-template-columns: 1fr 350px 350px 1fr;
        grid-template-rows: auto 10px;
        grid-template-areas: '. picture lined .' '. . . .';
        grid-gap: 10px;
    }

    .picture.paper {
        max-width: 350px;
    }
}

@media (min-width:992px) {
    div.paper {
        display: grid;
        grid-template-columns: 1fr 400px 400px 1fr;
        grid-template-rows: auto 10px;
        grid-template-areas: '. picture lined .' '. . . .';
        grid-gap: 25px;
    }

    .picture.paper {
        max-width: 400px;
        z-index: -9;
    }
}

div.outline {
    border: 5px solid black;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

p.txtcen {
    text-align: center;
}

.hsks3 {
    grid-area: key-stage-3;
}

.carousel-inner.col2 {
    border: 5px solid #999999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgba(193, 189, 189, 0.75);
}

div.other {
    grid-area: other;
}

p.indent {
    padding-left: 30px;
}

p.ctxt {
    grid-area: ctxt;
    font-size: 20px;
    font-weight: bold;
}

p.cctxt {
    grid-area: cctxt;
    font-size: 20px;
    font-weight: bold;
}

img.cimg {
    grid-area: cimg;
}

img.ccimg {
    grid-area: ccimg;
}

@media (min-width:1px) and (max-width:767px) {
    div.covidfont {
        display: grid;
        grid-template-columns: 1fr 270px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. ctxt .' '. cimg .' '. cctxt .' '. ccimg .';
        grid-gap: 20px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.covidfont {
        display: grid;
        grid-template-columns: 1fr 300px 300px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. ctxt cctxt .' '. cimg ccimg .';
        grid-gap: 20px;
    }
}

@media (min-width:992px) {
    div.covidfont {
        display: grid;
        grid-template-columns: 1fr 500px auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. ctxt cctxt .' '. cimg ccimg .';
        grid-gap: 20px;
    }
}

@media (min-width:1px) and (max-width:991px) {
    div.covidpaper {
        display: grid;
        grid-template-columns: 0.2fr 1fr 0.2fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: '. ctxt .' '. cimg .' '. cctxt .' '. ccimg .';
        grid-gap: 20px;
    }
}

@media (min-width:992px) {
    div.covidpaper {
        display: grid;
        grid-template-columns: 1fr 450px 450px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: '. ctxt cctxt .' '. cimg ccimg .';
        grid-gap: 20px;
    }
}

div.covid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: '. ctxt cctxt .' '. cimg ccimg .';
    grid-gap: 20px;
}

a.c-ll {
    grid-area: c-ll;
}

a.c-ml {
    grid-area: c-ml;
}

a.c-sl {
    grid-area: c-sl;
}

img.cc-img {
    grid-area: cc-img;
}

a.cc-ll {
    grid-area: cc-ll;
}

a.cc-ml {
    grid-area: cc-ml;
}

a.cc-sl {
    grid-area: cc-sl;
}

img.c-img {
    grid-area: c-img;
}

@media (min-width:1px) and (max-width:767px) {
    div.c19paper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 120px 75px 75px 75px 25px 120px 75px 75px 75px;
        grid-template-areas: '. c-img .' '. c-ll .' '. c-ml .' '. c-sl .' '. . .' '. cc-img .' '. cc-ll .' '. cc-ml .' '. cc-sl .';
        grid-gap: 10px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.c19paper {
        display: grid;
        grid-template-columns: 1fr 150px 1fr 1fr;
        grid-template-rows: 75px 75px 75px 25px 75px 75px 75px;
        grid-template-areas: '. c-img c-ll .' '. c-img c-ml .' '. c-img c-sl .' '. . . .' '. cc-img cc-ll .' '. cc-img cc-ml .' '. cc-img cc-sl .';
        grid-gap: 10px;
    }
}

@media (min-width:992px) {
    div.c19paper {
        display: grid;
        grid-template-columns: 1fr 150px 1fr 150px 1fr 1fr;
        grid-template-rows: 75px 75px 75px;
        grid-template-areas: '. c-img c-ll cc-img cc-ll .' '. c-img c-ml cc-img cc-ml .' '. c-img c-sl cc-img cc-sl .';
        grid-gap: 10px;
    }
}

a.c-img {
    grid-area: c-img;
    justify-self: center;
}

a.cc-img {
    grid-area: cc-img;
    justify-self: center;
}

img.about {
    grid-area: map;
    width: 100%;
    height: auto;
}

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/* CONTACT FORM EXAMPLE FOR FORMCARRY

  IMPORTANT NOTE:
  PLEASE ADD formcarry-form class to your form element
  to apply the styles. */
.formcarry-container * {
    box-sizing: border-box;
    font-family: "Inter", sans-serif;

    /* colors */
    --color-blue: #2552d0;
    --color-light-blue: #3266e3;
    --color-gray: #e5e7eb;
    --color-dark-gray: #9da3ae;
    --color-pink: #edadd2;
}

.formcarry-container {
    /* container */
    --c-width: 50%;
    --c-max-width: 500px;
    width: var(--c-width);
    max-width: var(--c-max-width);
    display: block;
    margin: 10vh auto 0 auto;
}

.formcarry-form label {
    display: block;
    padding: 12px 0 2px 0;
    letter-spacing: -0.2px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}

.formcarry-form input,
.formcarry-form textarea {
    font-size: 16px;
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--color-gray);
    border: none;
    border: 4px solid var(--color-gray);
    outline: none;
    border-radius: 8px;
    color: var(--color-dark-gray);
}

.formcarry-form input:focus,
.formcarry-form textarea:focus {
    background-color: #fff;
    color: var(--color-dark-gray);
}

.formcarry-form input:focus:required:invalid {
    border-color: var(--color-pink);
    background-color: #fff;
}

.formcarry-form button {
    display: block;
    margin-top: 12px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    border-color: transparent;
    background-color: var(--color-blue);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    transition: 300ms all;
}

.formcarry-form button:hover {
    background-color: var(--color-light-blue);
}

.formcarry-alert {
    padding: 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    margin-top: 12px;
    display: none;
}

.formcarry-alert.visible {
    display: block;
}

.formcarry-alert.success {
    background: #69cf9d;
}

.formcarry-alert.error {
    background: #de524c;
}