#wrap-sms-tartan-form .submit-box,
#presence-form .submit-box {
    float: right;
    display: block;
}

#presence-form .submit-box {
    width: 320px;
}

#presence-form input[type="submit"] {
    float: right;
}

#sms-tartan-form input[type="submit"],
#presence-form input[type="submit"] {
    display: block;
    color: #FFF;
}

.wpcf7-spinner {
    float: left;
}

.wpcf7-form-control.wpcf7-submit,
.uagb-forms-main-submit-button-text{
    color: #FFF !important;
}

.wpcf7-response-output {
    display: none !important;
}

.wpcf7-not-valid-tip {
    color: #ED4C67 !important;
    font-style: italic;
    font-size: 12px;
}

#sms-tartan-form .clear,
#presence-form .clear {
    clear: both;
    display: block;
}

#wrap-sms-tartan-form h3 {
    display: none;
}

#wrap-sms-tartan-form {
    margin-bottom: 40px;
}

#sms-tartan-form .sms-tartan-form__labelbox {
    display: block;
    box-sizing: border-box;
    margin-bottom: 30px;
}

#sms-tartan-form .sms-tartan-form__labelbox.col2,
#presence-form .presence-form__labelbox.col2 {
    float: left;
    width: 50%;
}

#presence-form .presence-form__labelbox {
    display: block;
    box-sizing: border-box;
    margin-bottom: 0px;
}

#presence-form .presence-form__labelbox p {
    margin: 0;
}

#sms-tartan-form .sms-tartan-form__labelboxes,
#presence-form .presence-form__labelboxes {
    margin-bottom: 40px;
}

#sms-tartan-form .sms-tartan-form__labelbox.col2:first-child,
#presence-form .presence-form__labelbox.col2:first-child {
    padding-right: 40px;
}

#sms-tartan-form .sms-tartan-form__labelbox input[type="text"],
#presence-form .presence-form__labelbox input[type="text"],
#presence-form .presence-form__labelbox textarea {
    border: solid 1px #d1d1d1;
    border-left-width: 4px;
    background-color: transparent;
    width: 100%;
}

#presence-form .presence-form__labelbox textarea {
    width: 100%;
    min-height: 180px;
    height: 180px;
    max-width: 100%;
    min-width: 100%;
}

#sms-tartan-form .sms-tartan-form__labelbox .sms-tartan-form-label.required::after,
#presence-form .presence-form__labelbox .presence-form-label.required p::after {
    color: #f00;
    content: " *";
}

#sms-tartan-form .sms-tartan-form__labelbox input[type="text"]:hover,
#sms-tartan-form .sms-tartan-form__labelbox input[type="text"]:focus,
#presence-form .presence-form__labelbox input[type="text"]:hover,
#presence-form .presence-form__labelbox input[type="text"]:focus,
#presence-form .presence-form__labelbox textarea:focus {
    border: solid 1px #2a9d8f;
    border-left-width: 4px;
}

#sms-tartan-form .clan {
    margin : 15px 0;
    box-sizing: border-box;
    border: solid 2px transparent;
    position: relative;
    display: flex;
}

#sms-tartan-form .clan .fleft1 {
    display: block;
    width: 16%;
    margin: 0 0 0 0;
}

#sms-tartan-form .clan .fleft2 {
    display: block;
    margin: 0 0 0 2%;
    width: 80%;
}

#sms-tartan-form input[type='radio'] {
    display: none;
}

#sms-tartan-form .tartan-img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-decoration: none;
    background-size: cover;
}

#sms-tartan-form .clan h4 span {
    font-size: 16px;
    display: block;
    font-weight: normal;
    line-height: 12px;
}

#sms-tartan-form .clan .layer-trans {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFF;
    opacity: 0.3;
    position: absolute;
}

#sms-tartan-form .clan:hover,
#sms-tartan-form .clan.selected {
    cursor: pointer;
    border: solid 2px #2a9d8f;
}

#sms-tartan-form .clan.choosen {
    cursor: default;
    border: none;
}

#sms-tartan-form .clan:hover .layer-trans,
#sms-tartan-form .clan.selected .layer-trans,
#sms-tartan-form .clan.choosen .layer-trans {
    display: none;
}

#clan_detail_page .error-p-box,
#potions .error-p-box {
    display: block;
    background: linear-gradient(to right, rgb(237, 76, 103), rgb(238, 90, 36));
    padding: 30px;
    color: #FFF;
    width: 1200px;
    margin: 0 auto 60px auto;
}

#clan_detail_page .error-p-box a,
#potions .error-p-box a {
    color: #FFF;
}

#clan_detail_page .f-left {
    display: block;
    float: left;
}

#clan_detail_page .f-right {
    display: block;
    float: right;
}

#clan_detail_page .clan-img {
    width: 30%;
    padding: 0 2% 0 0;
}

#clan_detail_page .clan-img .tartan-img {
    margin-top: 30px;
}

#clan_detail_page .members {
    display: block;
}

#clan_detail_page .wrap-story {
    background: #FFF;
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
}

#clan_detail_page .wrap-member {
    background: rgba(217,187,158,0.09);
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
}

#clan_detail_page .wrap-story .sub-container-story {
    width: 1200px;
    padding: 50px 0;
    margin: 0 auto;
}

#clan_detail_page .wrap-member .sub-container-member {
    width: 1200px;
    padding: 50px 0;
    margin: 0 auto;
}

#clan_detail_page .members .member {
    display: block;
    float: left;
    width: 18%;
    margin: 1%;
    padding: 8px 8px 90px 8px;
    box-sizing: border-box;
    background: #FFF;
    position: relative;
}

#clan_detail_page .members .member .tartan-border {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
}

#clan_detail_page .members .member h5 {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 14px;
}

#clan_detail_page .quote {
    background: #EFEFEF;
    border-left: solid 6px #DDDDDD;
    padding: 70px 30px;
    position: relative;
}

#clan_detail_page .quote .quotesp1  {
    position: absolute;
    top: 50px;
    left: 18px;
    font-size: 140px;
    color: #CACACA;
}

#clan_detail_page .quote .quotesp2  {
    position: absolute;
    bottom: 0px;
    right: 18px;
    font-size: 140px;
    color: #CACACA;
}

#clan_detail_page .quote p {
    font-style: italic;
    color: #777777;
}

#clan_detail_page .quote p.chief {
    text-align: right;
    font-weight: bold;
}

#clan_detail_page .clan-details {
    width: 67%;
    padding: 0;
}

#clan_detail_page .clan-img img {
    display: block;
    max-width: 100%;
    height: auto;
}

#clan_detail_page .clear {
    display: block;
    clear: both;
}

.score-overflow-scroll {
    overflow-x: auto !important;
}

#scores * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bricolage Grotesque", sans-serif, Arial;
}

#potions {
    display: block;
    height: calc(100vh - 195px);
    background: #000000;
}

#potions .wrap-clans {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 860px;
    padding: 0 30px;
}

#potions h1 {
    color: #FFF;
    text-align: center;
}

#potions .wrap-clans .clan {
    display: block;
    margin: 30px 0;
    width: 100%;
}

#potions .wrap-clans .clan .gauge {
    display: block;
    float: left;
    position: relative;
    border: solid 1px grey;
    width: 600px;
    height: 40px;
    box-sizing: border-box;
    margin-left: 30px;
}

#potions .wrap-clans .clan .gauge .inner {
    display: block;
    position: absolute;
    height: 34px;
    box-sizing: border-box;
    min-width: 10px;
    left: 2px;
    top: 2px;
    z-index: 10;
    transition: width 400ms ease-in;
}

#potions .clan .vote-btn .loader {
    width: 40px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -10px;
    aspect-ratio: 1;
    --c: linear-gradient(#FFF 0 0);
    --r1: radial-gradient(farthest-side at bottom,#FFF 93%,#FFF);
    --r2: radial-gradient(farthest-side at top   ,#FFF 93%,#FFF);
    background:
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
    display: none;
}
@keyframes l2 {
    0%,25% {
        background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
    }
    50% {
        background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
    }
    75% {
        background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
    }
    95%,100% {
        background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
    }
}

#potions .wrap-clans .clan h2,
#potions .wrap-clans .clan h3 {
    color: #FFF;
}

#potions .wrap-clans .clear {
    display: block;
    clear: both;
}

#potions .wrap-clans .clan h2 {
    display: block;
    float: left;
    font-size: 20px;
    margin: 5px 0 0 130px;
}

#potions .wrap-clans .clan h3 {
    font-size: 25px;
    position: absolute;
    z-index: 11;
    top: 2px;
    right: 15px;
}

#potions .wrap-clans .clan .vote-btn {
    display: block;
    float: left;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    color: #FFF;
    border-radius: 3px;
    transition: background-color 200ms linear;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    line-height: 20px;
    font-size: 16px;
    position: relative;
}

#potions .wrap-clans .clan .vote-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

#potions .wrap-clans .clan .vote-btn i {
    display: none;
}

#potions .wrap-clans .clan.mackenzie .gauge .inner {
    background: #e85e28;
    box-shadow: 0 0 10px 5px rgba(232, 94, 40, 0.8);
}

#potions .wrap-clans .clan.douglas .gauge .inner {
    background: #3152f6;
    box-shadow: 0 0 10px 5px rgba(49, 82, 246, 0.8);
}

#potions .wrap-clans .clan.wallace .gauge .inner {
    background: #36c147;
    box-shadow: 0 0 10px 5px rgba(54, 193, 71, 0.8);
}

#potions .wrap-clans .clan.macgregor .gauge .inner {
    background: #bababa;
    box-shadow: 0 0 10px 5px rgba(186, 186, 186, 0.8);
}

#potions .wrap-clans .clan .vote-btn.mackenzie {
    background: #e85e28;
}

#potions .wrap-clans .clan .vote-btn.douglas {
    background: #3152f6;
}

#potions .wrap-clans .clan .vote-btn.wallace {
    background: #36c147;
}

#potions .wrap-clans .clan .vote-btn.macgregor {
    background: #bababa;
}

#potions .wrap-clans .clan .vote-btn.mackenzie:not(.disabled):hover {
    background: #c33801;
}

#potions .wrap-clans .clan .vote-btn.douglas:not(.disabled):hover {
    background: #0627c9;
}

#potions .wrap-clans .clan .vote-btn.wallace:not(.disabled):hover {
    background: #098519;
}

#potions .wrap-clans .clan .vote-btn.macgregor:not(.disabled):hover {
    background: #696969;
}

#scores {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 195px);
    background: #000000;
    gap: 70px;
    min-width: 1600px !important;
    x-overflow: auto;
}

#scores .glass-wrapper {
    position: relative;
    display: block;
}

#scores .glass-wrapper h2 {
    color: #FFF;
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
}

#scores .glass-wrapper h2 span {
    font-size: 12px;
    font-weight: normal;
}

#scores .glass-wrapper h3 {
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: normal;
}

#scores .glass {
    position: relative;
}

#scores .glass .inner {
    position: relative;
    width: 300px;
    height: 60vh;
    border-radius: 40px;
    border: 8px solid transparent;
    background: rgba(255, 255, 255, 0.1);
    animation-delay: calc(var(--i) * -1.25s);
}

#scores .glass .inner::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 10px);
    height: 30px;
    border: 10px solid #444;
    border-radius: 50%;
    box-shadow: 0 15px 0 #222;
}

#scores .glass .inner::after {
    content: '';
    position: absolute;
    top: 70px;
    left: 30px;
    width: 50px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
}

#scores .liquid {
    position: absolute;
    top: 50px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

#scores .liquid.score1 {
    animation: animateLiquid1 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score2 {
    animation: animateLiquid2 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score3 {
    animation: animateLiquid3 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score4 {
    animation: animateLiquid4 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score5 {
    animation: animateLiquid5 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score6 {
    animation: animateLiquid6 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score7 {
    animation: animateLiquid7 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score8 {
    animation: animateLiquid8 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score9 {
    animation: animateLiquid9 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score10 {
    animation: animateLiquid10 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score11 {
    animation: animateLiquid11 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score12 {
    animation: animateLiquid12 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score13 {
    animation: animateLiquid13 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score14 {
    animation: animateLiquid14 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score15 {
    animation: animateLiquid15 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score16 {
    animation: animateLiquid16 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score17 {
    animation: animateLiquid17 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score18 {
    animation: animateLiquid18 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score19 {
    animation: animateLiquid19 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score20 {
    animation: animateLiquid20 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .liquid.score21 {
    animation: animateLiquid21 2s linear infinite;
    animation-delay: calc(var(--i) * -1.33s);
}

#scores .glass-wrapper .glass .inner {
    animation: animateColor 3s linear infinite;
}

#scores .glass-wrapper.mackenzie .glass .inner .liquid {
    background: #e85e28;
    filter: drop-shadow(0 0 80px #e85e28);
}

#scores .glass-wrapper.douglas .glass .inner .liquid {
    background: #3152f6;
    filter: drop-shadow(0 0 80px #3152f6);
}

#scores .glass-wrapper.wallace .glass .inner .liquid {
    background: #36c147;
    filter: drop-shadow(0 0 80px #36c147);
}

#scores .glass-wrapper.macgregor .glass .inner .liquid {
    background: #bababa;
    filter: drop-shadow(0 0 80px #bababa);
}

#scores .glass-wrapper.mackenzie .glass .inner .liquid::before {
    background: #c33801;
}

#scores .glass-wrapper.douglas .glass .inner .liquid::before {
    background: #0627c9;
}

#scores .glass-wrapper.wallace .glass .inner .liquid::before {
    background: #098519;
}

#scores .glass-wrapper.macgregor .glass .inner .liquid::before {
    background: #696969;
}

@keyframes animateColor {
    0%, 100%
    {
        filter: hue-rotate(-20deg);
    }
    50%
    {
        filter: hue-rotate(0deg);
    }
}

@keyframes animateLiquid1 {
    0%, 20%, 100%
    {
        top: 96%;
    }
    50%, 70%
    {
        top: 95%;
    }
}

@keyframes animateLiquid2 {
    0%, 20%, 100%
    {
        top: 92%;
    }
    50%, 70%
    {
        top: 91%;
    }
}

@keyframes animateLiquid3 {
    0%, 20%, 100%
    {
        top: 87%;
    }
    50%, 70%
    {
        top: 86%;
    }
}

@keyframes animateLiquid4 {
    0%, 20%, 100%
    {
        top: 83%;
    }
    50%, 70%
    {
        top: 82%;
    }
}

@keyframes animateLiquid5 {
    0%, 20%, 100%
    {
        top: 78%;
    }
    50%, 70%
    {
        top: 77%;
    }
}

@keyframes animateLiquid6 {
    0%, 20%, 100%
    {
        top: 73%;
    }
    50%, 70%
    {
        top: 72%;
    }
}

@keyframes animateLiquid7 {
    0%, 20%, 100%
    {
        top: 68%;
    }
    50%, 70%
    {
        top: 67%;
    }
}

@keyframes animateLiquid8 {
    0%, 20%, 100%
    {
        top: 63%;
    }
    50%, 70%
    {
        top: 62%;
    }
}

@keyframes animateLiquid9 {
    0%, 20%, 100%
    {
        top: 58%;
    }
    50%, 70%
    {
        top: 57%;
    }
}

@keyframes animateLiquid10 {
    0%, 20%, 100%
    {
        top: 53%;
    }
    50%, 70%
    {
        top: 52%;
    }
}

@keyframes animateLiquid11 {
    0%, 20%, 100%
    {
        top: 48%;
    }
    50%, 70%
    {
        top: 47%;
    }
}

@keyframes animateLiquid12 {
    0%, 20%, 100%
    {
        top: 43%;
    }
    50%, 70%
    {
        top: 42%;
    }
}

@keyframes animateLiquid13 {
    0%, 20%, 100%
    {
        top: 38%;
    }
    50%, 70%
    {
        top: 37%;
    }
}

@keyframes animateLiquid14 {
    0%, 20%, 100%
    {
        top: 33%;
    }
    50%, 70%
    {
        top: 32%;
    }
}

@keyframes animateLiquid15 {
    0%, 20%, 100%
    {
        top: 28%;
    }
    50%, 70%
    {
        top: 27%;
    }
}

@keyframes animateLiquid16 {
    0%, 20%, 100%
    {
        top: 24%;
    }
    50%, 70%
    {
        top: 23%;
    }
}

@keyframes animateLiquid17 {
    0%, 20%, 100%
    {
        top: 20%;
    }
    50%, 70%
    {
        top: 19%;
    }
}

@keyframes animateLiquid18 {
    0%, 20%, 100%
    {
        top: 15%;
    }
    50%, 70%
    {
        top: 14%;
    }
}

@keyframes animateLiquid19 {
    0%, 20%, 100%
    {
        top: 11%;
    }
    50%, 70%
    {
        top: 10%;
    }
}

@keyframes animateLiquid20 {
    0%, 20%, 100%
    {
        top: 7%;
    }
    50%, 70%
    {
        top: 6%;
    }
}

@keyframes animateLiquid21 {
    0%, 20%, 100%
    {
        top: 4%;
    }
    50%, 70%
    {
        top: 3%;
    }
}

#scores .liquid::before {
    content: '';
    position: absolute;
    top: -10px;
    width: 100%;
    height: 20px;
    border-radius: 50%;
    background: #1fa4e0;
}

@media (max-width: 1300px) {
    #clan_detail_page .wrap-story .sub-container-story {
        width: 100%;
    }

    #clan_detail_page .error-p-box,
    #potions .error-p-box {
        width: 90%;
        margin: 0 auto 60px auto;
    }

    #clan_detail_page .wrap-story {
        padding: 0 25px;
    }

    #clan_detail_page .wrap-member .sub-container-member {
        width: 100%;
    }
}
@media (max-width: 770px) {
    #sms-tartan-form .sms-tartan-form__labelbox.col2,
    #presence-form .presence-form__labelbox.col2 {
        display: block;
        float: none;
        width: 100%;
        box-sizing: border-box;
    }
    #sms-tartan-form .sms-tartan-form__labelbox.col2:first-child,
    #presence-form .presence-form__labelbox.col2:first-child {
        padding-right: 0px;
    }
    #presence-form .presence-form__labelbox.col2:first-child {
        margin-bottom: 30px;
    }

    #clan_detail_page .members .member {
        width: 48%;
    }

    #clan_detail_page .f-left {
        float: none;
        clear: both;
        width: 100%;
        padding: 0;
    }

    #clan_detail_page .f-right {
        float: none;
        clear: both;
        width: 100%;
        padding: 0;
    }

    #clan_detail_page .clan-img .tartan-img {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }

    #potions .wrap-clans .clan .vote-btn {
        width: 20%;
    }

    #potions .wrap-clans .clan .gauge {
        width: 75%;
        margin-left: 4%;
    }

    #potions .wrap-clans .clan .vote-btn span {
        font-size: 12px;
    }

    #potions .wrap-clans .clan h2 {
        font-size: 15px;
        margin: 5px 0 0 0;
        text-align: right;
        display: block;
        float: none;
    }
}

@media (max-width: 320px) {
    #potions h1 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    #potions .wrap-clans .clan .vote-btn span {
        font-size: 10px;
    }

    #potions .wrap-clans .clan .vote-btn {
        width: 24%;
    }

    #potions .wrap-clans .clan {
        margin: 15px 0;
    }

    #potions .wrap-clans .clan .gauge {
        width: 71%;
    }
}