/* =============================================
=                General Dialog                =
============================================= */


.s-dialog__wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: hsla(0, 0%, 0%, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    transition: all 0.1s 0.2s ease-out;
}

    .s-dialog__wrap.-open {
        transition: all 0.1s ease-out;
        visibility: visible;
        opacity: 1;
    }

.c-dialog {
    background-color: var(--colorTeal);
    width: 100%;
    overflow-x: hidden;
    transition: all 0.1s ease-out;
    transform: scale(0.5);
    opacity: 0;
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.2);
}

.-open .c-dialog {
    transition: all 0.1s 0.2s ease-out;
    transform: scale(1);
    opacity: 1;
}

.c-dialog__headerLike {
    bottom: 0;
    right: 6em;
}

.c-dialog__headerClose {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 2em;
    top: 2em;
    height: 2em;
    width: 2em;
    border-radius: 0.25em;
    background-color: hsla(0, 0%, 100%, 0.75);
    border: 1px solid var(--colorGray);
    color: var(--colorGray);
    transition: all 0.18s ease-out;
    z-index: 4;
}

    .c-dialog__headerClose:hover {
        background-color: var(--colorTeal);
        color: var(--colorWhite);
        box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.5);
    }

    .c-dialog__headerClose::before,
    .c-dialog__headerClose::after {
        content: '';
        height: 1em;
        width: 1px;
        transform-origin: 50%;
        background: currentColor;
    }

    .c-dialog__headerClose::before {
        transform: rotate(45deg);
    }

    .c-dialog__headerClose::after {
        transform: rotate(-45deg);
    }


/* ========  End of General Dialog  ========= */







/* =============================================
=                Dialog detail                 =
============================================= */

/* header */

.c-detail__header {
    background-color: var(--colorWhite);
    background-image: url('../images/Header-details.svg');
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 10.5em;
    padding: 0 5em;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.c-detail__headerSocial {
    position: absolute;
    top: 0;
    left: 4em;
    background-color: var(--colorWhite);
    color: var(--colorGray);
}


.c-detail__headerTitle {
    font-size: 1.75em;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.c-detail__headerAuthor {
    font-weight: 200;
    color: var(--colorTeal);
    font-size: 1.35em;
}

/* Dialog body layout */

.s-detail__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2em 5em;
}

.c-detail__media {
    flex: 0 0 58%;
    position: relative;
}

.c-detail__info {
    flex: 0 0 38%;
    position: relative;
    color: var(--colorWhite);
    display: flex;
    overflow: hidden;
}

.c-detail__components {
    color: var(--colorWhite);
    flex: 0 0 100%;
    border-bottom: 1px solid var(--colorGold);
}

/* .c-detail__components::before {
        content: 'Arduino Component:';
        font-weight: 700;
        text-transform: uppercase;
        padding-right: 1em
    } */



/* Media */

.tns-outer,
.tns-ovh,
.tns-inner,
.tns-slider {
    height: 100%;
    background-color: var(--colorBlack);
}

.-not-initialized {
    opacity: 0;
}

.c-detail__galleryObj {
    object-fit: contain;
    height: 100%;
    object-position: 50%;
    background-color: #000;
}

/* .tns-horizontal.tns-subpixel>.c-detail__galleryObj {
        vertical-align: middle;
    } */

.c-detail__mediaControls {
    position: absolute;
    top: calc(50% - 0.75em);
    left: -0.75em;
    right: -0.75em;
    display: flex;
    pointer-events: none;
}

.c-detail__mediaPrev,
.c-detail__mediaNext {
    width: 1em;
    height: 1em;
    text-align: center;
    font-size: 1.5em;
    background-color: hsla(0, 0%, 0%, 0.8);
    color: var(--colorWhite);
    cursor: pointer;
    pointer-events: all;
}

    .c-detail__mediaPrev:hover,
    .c-detail__mediaNext:hover,
    .c-detail__mediaPrev:focus,
    .c-detail__mediaNext:focus {
        box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.8);
    }

    .c-detail__mediaPrev:focus,
    .c-detail__mediaNext:focus {
        outline: none;
    }

.c-detail__mediaNext {
    margin-left: auto;
}

.tns-nav {
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}

    .tns-nav > button {
        border: none;
        width: 10px;
        height: 12px;
        border-radius: 50%;
        background: hsla(0, 0%, 100%, 0.7);
        font-size: 0;
        margin: 0 5px;
    }

    .tns-nav > .tns-nav-active {
        background: var(--colorGold);
    }


/* Tabs */
.c-detail__infoInput {
    display: none;
}

    .c-detail__infoInput:not(:checked) + .c-detail__infoContent > .c-detail__infoBody {
        display: none;
    }

.c-detail__infoBody {
    float: right;
    width: 100%;
    margin: 1.7em 0 0 -100%;
    padding-top: 1em;
    border-top: 1px solid var(--colorMint);
    overflow-y: auto;
    height: calc(100% - 1.8em);
    line-height: 1.4;
}

.c-detail__infoTab {
    float: left;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    font-size: 0.925em;
    padding: 0.45em 0.5em 0.15em;
    margin-bottom: -1px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0.5em 0.5em 0 0;
    color: var(--colorMint);
    margin-right: 0.25em;
    font-weight: 700;
    position: relative;
    z-index: 1;
    background-color: var(--colorTeal);
}

.c-detail__infoButton {
    width: 100%;
    height: 100%;
}

.c-detail__infoTabs {
    margin-bottom: 2em;
    width: 100%;
}

    .c-detail__infoTabs:after {
        content: "";
        display: table;
        clear: both;
    }

.c-detail__infoInput:checked + .c-detail__infoContent .c-detail__infoTab {
    border-color: var(--colorMint) var(--colorMint) var(--colorTeal);
    color: var(--colorWhite);
}

.c-detail__infoContent {
    height: calc(100% + 1.6em);
    width: 100%;
}


/* Project prev/next */

.s-detail__control {
    display: flex;
    align-items: center;
}

.c-detail__controlPrev,
.c-detail__controlNext {
    border-radius: 3px;
    background: hsla(0, 0%, 100%, 20%);
    display: flex;
    align-items: center;
    font-size: 0.875em;
    font-weight: 700;
    color: var(--colorWhite);
    cursor: pointer;
    transition: all 0.2s ease-out;
}

    .c-detail__controlPrev:hover,
    .c-detail__controlNext:hover {
        background-color: var(--colorMint);
        box-shadow: 0 4px 16px hsla(0, 0%, 0%, 0.2);
    }


.c-detail__controlNext {
    margin-left: auto;
    text-align: right;
    justify-content: flex-end;
}

.-next .c-detail__controlLabel,
.-prev .c-detail__controlLabel {
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap
}

.c-detail__controlProject.-next {
    padding-left: 1.5em;
}

.c-detail__controlProject.-prev {
    padding-right: 1.5em;
}

.arrow-left,
.arrow-right {
    color: var(--colorGold);
    font-size: 1.5em;
    padding: 1em;
}




/* ========  End of Dialog detail  ========== */






/* =============================================
=                  Dialog Vote                 =
============================================= */

.s-vote__contentWrap {
    display: grid;
}

    .s-vote__contentWrap::before {
        content: "\f060";
        font-family: 'ioa' !important;
        color: var(--colorGold);
        font-size: 5em;
        position: absolute;
    }

.c-vote__header {
    background-image: url('../images/Header-vote.svg');
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 9em;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.s-vote__info {
    background-color: var(--colorBlack);
}

.c-vote__infoImage {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.s-vote__infoGroup {
    padding-left: 4em;
    padding-right: 4em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 40%;
    padding-top: 1em;
    padding-bottom: 2em;
}

.c-vote__infoVote {
    color: var(--colorMint);
    font-weight: 700;
    font-size: 2em;
    letter-spacing: -0.025em;
    margin-bottom: 0.15em;
}

.c-vote__infoTitle {
    color: var(--colorWhite);
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.15em;
}

.c-vote__infoAuthor {
    color: var(--colorWhite);
    font-weight: 200;
    font-size: 1.25em;
    margin-bottom: 0.5em;
}

    .c-vote__infoAuthor::before {
        content: 'by ';
    }

.c-dialog__voteSocial {
    margin-top: auto;
}

    .c-dialog__voteSocial .c-social__item {
        font-size: 0.9em;
    }

.c-vote__infoComponents {
    padding-top: 0.75em;
    margin-top: 1em;
    border-top: 1px solid var(--colorGold);
    color: var(--colorWhite);
    width: 100%;
}

    .c-vote__infoComponents strong {
        text-transform: uppercase;
    }

.s-vote__form {
    padding-top: 7em;
    background-color: var(--colorWhite);
    padding-left: 4em;
    padding-right: 4em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.c-vote__formText {
    font-size: 2.5em;
    font-weight: 700;
    margin: 0 0 1em;
    line-height: 1;
}

.c-vote__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.25em 1em;
}

.c-vote__formItem {
    margin-bottom: 1em;
}

.c-vote__formLabel {
    color: var(--colorMint);
    text-transform: uppercase;
    margin-bottom: 0.25em;
    display: inline-block;
}

.c-vote__formInput {
    line-height: 2em;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 0.25em;
    border: 1px solid var(--colorGray);
    border-radius: 3px;
    width: 100%;
}

.c-vote__formSelect {
    border: 1px solid var(--colorGray);
    border-radius: 3px;
    width: 100%;
    height: 2.25em;
}

.c-vote__formRequired {
    color: var(--colorMint);
    font-size: 0.8725em;
}

.c-vote__formCheck {
    display: none;
}

    .c-vote__formCheck + .c-vote__formLabel {
        display: inline-flex;
        align-items: center;
        text-transform: initial;
    }

        .c-vote__formCheck + .c-vote__formLabel:before {
            font-family: 'ioa' !important;
            font-size: 1.5em;
            width: 1.25em;
            content: "\f096";
            color: var(--colorGray);
        }

    .c-vote__formCheck:checked + .c-vote__formLabel:before {
        content: "\f14a";
        color: var(--colorMint);
    }

.-fullWidth {
    grid-column: 1 / 3;
}

.c-vote__formButton {
    margin: auto;
    max-height: 50px;
}

.c-legal {
    color: var(--colorGray);
}

.c-legal__link {
    color: var(--colorMint);
}


/* =========  End of Dialog Vote  =========== */






/* =============================================
=                Dialog Thanks                 =
============================================= */


.s-thanks__content {
    background-color: var(--colorWhite);
    background-image: url('../images/Header-thanks.svg');
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 90%;
    width: 100%;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    display: flex;
    flex-direction: column;
    padding-top: 7em;
    align-items: center;
    text-align: center;
}


.c-thanks__title {
    font-weight: 700;
    font-size: 3em;
    margin-bottom: 1em;
}

.c-thanks__text {
    color: var(--colorTeal);
    font-size: 1.25em;
    line-height: 0.75;
}

.c-dialog__thanksSocial {
    background-color: var(--colorMint);
    margin-top: 2em;
    font-size: 1.25em;
}

.c-thanks__robot {
    position: absolute;
    height: 17.8125em;
    width: 16.25em;
    bottom: 0;
    right: 2em;
    background-image: url('../images/robot.svg');
    background-repeat: no-repeat;
}

.c-thanks__backLink {
    background-color: black;
    color: white;
    border-radius: 0.25em;
    text-decoration: none;
    padding: 0.75em 1em;
    font-size: 1.25em;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease-out;
    margin-top: 1em;
}

.c-thanks__backIcon {
    font-size: 1.25em;
    padding-right: 0.5em;
    margin-top: -3px;
}


/* ========  End of Dialog Thanks  ========== */



/* =============================================
=                     Icons                    =
============================================= */


@font-face {
    font-family: 'ioa';
    src: url('ioa.ttf?s3vgzd') format('truetype'), url('ioa.woff?s3vgzd') format('woff'), url('ioa.svg?s3vgzd#ioa') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'ioa' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.arrow-left:before {
    content: "\e900";
}

.arrow-right:before {
    content: "\e901";
}

.heart:before {
    content: "\f004";
}

.check:before {
    content: "\f00c";
}

.fat-arrow-left:before {
    content: "\f060";
}

.linkedin:before {
    content: "\f08c";
}

.square-o:before {
    content: "\f096";
}

.twitter:before {
    content: "\f099";
}

.facebook:before {
    content: "\f09a";
}

.angle-left:before {
    content: "\f104";
}

.angle-right:before {
    content: "\f105";
}

.check-square:before {
    content: "\f14a";
}

/* =============  End of Icons  ============= */







/* =============================================
=              Responsive Styles               =
=                                              =
=   Break Points: 1250, 1024, 890, 720, 600    =
============================================= */


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

    /* tablet and mobile */

    .s-page {
        background-image: linear-gradient(to bottom, #000, hsla(0, 0%,0%,0.5) 12em, transparent 48em), url(../images/Background.jpg);
    }

    .s-content {
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 20.5em auto auto 1fr 11.25em;
    }

    .c-social__item,
    .c-back {
        --max-font: 16;
        --min-font: 18;
        --max-width: 891;
        --min-width: 300;
        font-size: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - (var(--min-width) * 1px))) / (var(--max-width) - var(--min-width)));
    }

    .e-indiegogo {
        display: none;
    }

    .e-logo {
        /*grid-row: 1 / 2;*/
        background-position: 50%;
        margin-top: 0em;
        margin-bottom: 1em;
    }

    .c-award {
        grid-row: 2 / 3;
        text-align: center;
    }

    .c-award__funding,
    .c-award__money,
    .c-award__winner {
        display: inline-block;
        font-size: calc((1.3em) + (2.2 - 1.3) * ((100vw - 25em) / (55.625 - 25)));
    }

    .c-award__tag {
        margin-top: 0.75em;
    }

    .e-instructions {
        grid-row: 3 / 4;
        text-align: center;
        max-width: 100%;
    }

    .c-time {
        grid-row: 5 / 6;
        justify-content: center;
    }

    .s-cardGroup {
        grid-row: 4 / 5;
    }

    .e-cards {
        grid-template-columns: 1fr;
    }

    .c-card {
        height: 100%;
        min-height: 20em;
        background-size: cover;
        background-position: 0 100%;
        background-repeat: no-repeat;
    }

    .c-card__like {
        top: 0;
        left: 0;
        z-index: 6;
    }

    .c-card__block {
        width: calc(100% - 20em);
        margin-right: auto;
        height: 100%;
        min-height: 20em;
        padding: 2em;
        min-width: 18.75em;
    }

    .c-card__excerpt {
        position: relative;
    }

    .c-card__excerptText {
        /* max-height: 5.4em; */
        max-height: 100%;
    }

    .c-card__excerptMore {
        padding-left: 0;
    }

    .c-card__excerptDesktop {
        display: none;
    }

    .c-card__button {
        transform: translate(0);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        bottom: 0;
        right: 0;
        left: auto;
        opacity: 1;
    }

        .c-card__button,
        .c-card__button:hover,
        .c-card__button:active {
            box-shadow: none;
        }

    .e-showMore {
        margin: 0 auto;
    }

    .c-dialog__headerSocial {
        right: auto;
    }

    .c-dialog {
        height: 100vh;
    }

    .c-detail {
        display: grid;
        grid-template-rows: 10.55em 2em minmax(20vh, 1fr) 2em minmax(20vh, 1fr) 2.5em 1.25em 7.75em;
        grid-template-columns: 2em 1fr 2em;
        grid-template-areas: "header header header" ". . ." ". media ." ". . ." ". info ." ". vote ." ". component ." ". control .";
    }

    .c-detail__header {
        grid-area: header;
        padding: 0 2em;
    }

    .c-social.c-detail__headerSocial {
        right: auto;
        left: 2em;
    }

    .c-detail__media {
        grid-area: media;
        margin: auto;
        max-width: 70vw;
        height: 100%;
    }

    .c-detail__info {
        grid-area: info;
    }

    .c-detail__infoButton {
        grid-area: vote;
    }

    .c-detail__components {
        grid-area: component;
    }

    .s-detail__control {
        grid-area: control;
    }

    .s-vote__contentWrap {
        display: block;
    }

    .s-vote__info {
        height: 50vh;
    }

    .s-vote__form {
        height: auto;
        min-height: 55vh;
    }


    .s-vote__contentWrap::before {
        left: 50%;
        top: calc(45% - 0.5em);
        transform: translateX(-50%) rotate(-90deg);
        z-index: 1;
    }

    .s-vote__contentWrap {
        grid-template-rows: repeat(2, 1fr);
        min-height: 100vh;
    }


    .c-dialog__voteSocial {
        flex: 0 0 36px;
        position: absolute;
        top: 0;
        z-index: 1;
        left: 2em;
        border-radius: 0 0 0.25em 0.25em;
    }

        .c-dialog__voteSocial .c-social__text,
        .c-dialog__thanksSocial .c-social__text {
            display: none;
        }

    .c-vote__infoImage {
        height: 47.5%;
    }

    .s-vote__infoGroup {
        padding-left: 2em;
        padding-right: 2em;
    }

    .s-vote__form {
        padding: 3em 2em 3em;
    }

    .s-vote__info {
        height: 45vh;
    }

    .s-footer__wrap {
        padding-right: 0;
    }

    .e-footer__robot {
        display: none;
    }
}

@media screen and (min-width: 891px) {

    /* desktop */

    .s-content {
        max-width: 78.125em;
        margin: auto;
        grid-template-columns: 2fr 2em 1fr;
        grid-template-rows: 4.5em 6.125em 15em 6.25em 1fr;
    }

    .-mainPageSocial {
        margin-left: -67px;
    }

    .e-indiegogo {
        grid-row: 1 / 3;
        grid-column: 2 / 4;
    }

    /*.e-logo {
        grid-row: 2 / 4;
        grid-column: 1 / 2;
    }*/

    .c-award {
        grid-row: 3 / 4;
        grid-column: 3 / 4;
    }

    .e-instructions {
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }

    .c-time {
        grid-row: 4 / 5;
        grid-column: 3 / 4;
        justify-content: flex-end;
    }

    .s-cardGroup {
        grid-row: 5 / 6;
        grid-column: 1 / 4;
    }

    .e-cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .c-card__block {
        width: 100%;
        height: 12em;
        padding: 3.75em 1em 1em;
        clip-path: polygon(0 3.75em, 100% 0, 100% 100%, 0% 100%);
    }

    .c-card__like {
        top: 0;
        right: 0;
    }

    .c-card__excerpt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1em;
        transform: translateY(-25em);
        opacity: 0;
        background-color: hsla(0, 0%, 0%, 0.8);
    }

    @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
        .c-card__excerpt {
            background-color: hsla(0, 0%, 0%, 0.5);
            backdrop-filter: blur(16px);
        }
    }

    .c-card__excerptText {
        color: var(--colorWhite);
    }

    .c-card__excerptMobile {
        display: none;
    }

    .c-card__excerpt,
    .c-card__button {
        opacity: 1;
    }


    .c-card:hover .c-card__excerpt {
        transition: all 0.25s ease-out;
        transform: translateY(0);
    }

    .c-card:hover .c-card__button {
        transition: all 0.25s ease-out;
        transform: translate(-50%, 0);
    }

    .c-dialog {
        max-width: 72.5em;
        height: 75vh;
        border-radius: 0.25em;
    }

    .c-detail {
        display: grid;
        grid-template-rows: 10.55em 2em 1fr 2.5em 2.5em 7.75em;
        grid-template-columns: 5em 3fr 4em 2fr 5em;
        grid-template-areas: "header header header header header" ". . . . ." ". media . info ." ". media . vote ." ". component component component ." ". control control control .";
    }

    .c-detail__header {
        grid-area: header;
    }

    .c-detail__media {
        grid-area: media;
    }

    .c-detail__info {
        grid-area: info;
        /* height: 13em; */
    }

    .c-detail__infoButton {
        grid-area: vote;
    }

    .c-detail__components {
        grid-area: component;
    }

    .s-detail__control {
        grid-area: control;
    }

    .s-vote__contentWrap {
        grid-template-columns: repeat(2, 1fr);
        height: 75vh;
    }

        .s-vote__contentWrap::before {
            left: 50%;
            top: 0.3em;
            transform: translateX(-45%);
            z-index: 1;
        }
}


/* shorter than 750px */

@media screen and (max-height: 750px) {

    .c-detail {
        grid-template-rows: 9em 2em minmax(100px, 170px) 2.5em 1fr 3em 1.55em 6em;
    }

    .c-detail__header {
        height: 9em;
        padding-top: 1.5em;
    }

    .c-detail__infoBody {
        padding-top: 0;
    }
}


/* 1260 and above */

@media (min-width: 1260px) {
    .s-content {
        font-size: 16px;
    }
}


/* between 1259 and 891 */

@media (min-width: 891px) and (max-width: 1259px) {
    .s-content {
        --max-font: 16;
        --min-font: 12;
        --max-width: 1250;
        --min-width: 891;
        font-size: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - (var(--min-width) * 1px))) / (var(--max-width) - var(--min-width)));
    }

    .c-card__excerptText {
        font-size: 13px;
    }
}


/* between 1259 and 400 */

@media (min-width: 400px) and (max-width: 890px) {
    .s-content {
        --max-font: 16;
        --min-font: 12;
        --max-width: 891;
        --min-width: 400;
        font-size: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - (var(--min-width) * 1px))) / (var(--max-width) - var(--min-width)));
        grid-template-rows: 19em auto auto 1fr 11.25em;
    }
}

/* 399 and below */

@media (max-width: 399px) {
    .s-content {
        font-size: 14px;
        grid-template-rows: 14em auto auto 1fr 11.25em;
    }

    .c-card__block {
        background-color: transparent;
        background-image: linear-gradient(to right, #fff 70%, transparent);
    }

    .c-detail__controlProject {
        display: none;
    }

    .s-vote__contentWrap::before,
    .c-vote__infoImage {
        display: none;
    }

    .s-vote__infoGroup {
        padding-top: 4em;
    }

    .c-vote__form {
        display: block;
    }

    .s-vote__info {
        height: 28vh;
    }

    .s-thanks__group {
        padding-left: 1em;
        padding-right: 1em;
    }

    .c-thanks__text {
        line-height: 1.25;
    }

    .c-thanks__title {
        line-height: 1;
        margin-bottom: 0.25em;
    }

    .c-dialog__thanksSocial {
        margin-top: 0.25em;
    }

    .c-thanks__robot {
        height: 13.8125em;
        width: 12.25em;
        bottom: -1em;
        right: -4em;
        transform: rotate(-16deg);
    }
}




/* =======  End of Responsive Styles  ======= */