/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    background-color: #F0F0F0;
    font-family: 'Rubik', sans-serif;
    min-height: 100vh;
    color:white;
}

* {
    font-family: 'Rubik', sans-serif;
    font-display: swap;
}

.PageHeader {
    font-family: 'Baloo', cursive;
    text-align:center;
    margin-bottom: 15px;
}

.PageSubheader {
    text-align:center;
}

/*Background*/
.SkyContainer {
    background: rgb(0,32,50);
    background: linear-gradient(180deg, rgba(0,32,50,1) 0%, rgba(133,236,255,1) 100%);
}

.BodyContainer {
    position:relative;
    z-index: 1;
}

.StarsContainer {
    position: absolute;
    top: 0;
    width: 100%;
    /*display: flex;*/
    text-align:center;
    justify-content: center;
}

.MoonImage {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    display: -webkit-box; /*MacOS had bug where moon wasn't in top corner*/
    justify-content: center;
}

    .MoonImage img {
        width: 8vw;
    }

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/*MtSocks branding*/
.BlueContainer {
    background-color: #e0e8ea;
    border-radius: 15px;
    color: #2c4957;
    padding: 25px 25px 25px 25px;
}

.border-radius-5 {
    border-radius: 5px;
}

.OrangeText {
    color: #f6921f;
}
.OrangeText:hover {
    color: #f6921f;
}

.LightOrangeText {
    color: #f7a84c;
}

.DarkBlueText {
    color: #2c4957;
}

    .DarkBlueText:hover {
        color: #2c4957;
    }

.GreyText {
    color: #2c4957;
    text-decoration: none;
}

btn-danger {
    background-color: #da2e2f;
}

.btn-orange {
    background-color: #f6921f;
    color: white;
}

.btn-orange:hover {
    color:whitesmoke;
}

.btn-grey {
    background-color: #bdbdbd;
    color: #f04e23;
    cursor: not-allowed;
}

    .btn-grey:hover {
        color: darkred;
        cursor: not-allowed;
    }

.btn-dark-blue-hollow {
    color: #2c4957;
    background-color: transparent;
    border: 1px solid #2c4957;
}
.btn-dark-blue-hollow:hover {
    background-color: #2c4957;
    color:white;
    text-decoration: none;
}

.GreenText {
    color: #949474;
}

.text-justify-center {
    text-align: justify;
    text-align-last: center;
}

.MtSocksInput {
    padding: 10px;
}

.user-select-none {
    user-select: none;
    pointer-events:none;
}

.AddToCartButton {
    border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.SockBulletList {
    padding: 0px;
}

    .SockBulletList li {
        list-style: none;
    }

    .SockBulletList li:before {
        content: '';
        display: inline-block;
        position:relative;
        top: 4px;
        height: 20px;
        margin-right:10px;
        width: 15px;
        background-image: url(../images/Sock-Bullet-Point.svg);
    }

.modal {
    color:black;
}

/*Navbar*/
.navbar {
    margin-bottom: 100px;
}
.navbar-nav {
    width: 100%;
    /*padding-left:12vw;
    padding-right: 12vw;*/
}
    .navbar-nav .nav-item {
        flex-grow: 1;
        flex-basis: 0;
        text-align: center;
        align-self: center;
    }
.navbar-nav .nav-item a {
    font-weight: 600;
    color:white !important;
}

    .navbar-nav .nav-item a:hover {
        color: #f6921f !important;
        background-color:transparent !important;
    }


.MobileLogoContainer {
    margin-right: 75px;
}

.dropdown-menu {
    background-color: transparent !important;
    border: none !important;
    text-align: center;
    padding: 0;
    margin: 0;
}

.BasketIconHeader {
    width: 25px;
    position: relative;
    top: -5px;
}

.BasketIcon {
    width: 25px;
    position: relative;
    top: -3px;
}

.BasketCounter {
    position: relative;
    min-height: 20px;
    min-width: 20px;
    background-color: #f6921f;
    top: -10px;
    right: -10px;
    z-index:2;
    color: white !important;
    font-size: 12px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.BasketPulsate {
    -webkit-animation: BasketPulsate 1s ease-in-out both;
    animation: BasketPulsate 1s ease-in-out both;
}

@-webkit-keyframes BasketPulsate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.85);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes BasketPulsate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    33% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    66% {
        -webkit-transform: scale(2.0);
        transform: scale(2.00);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.cursor-pointer {
    cursor:pointer;
}

/*Footer*/
footer {
    margin-top: 100px;
    color: white;
    background-size: cover;
    display: flex;
}

.FooterLarge {
    background-image: url("../images/Background/Footer-Grass-Big.png");
    min-height: 805px;
}

.FooterSmall {
    background-image: url("../images/Background/Footer-Grass-Small.png");
    min-height: 645px;
}

.FooterContent {
    align-self: flex-end;
}

footer b {
    margin-bottom: 5px;
    display:block;
}

footer a {
    margin-top: 10px;
    display:block;
    color: white;
}

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

.FooterSocialIcons a {
    font-size: 20px;
    display: inline;
}

    .fa-instagram:hover {
        color: #DD2a7B;
    }
    .fa-facebook-f:hover {
        color: #3B5998;
    }

    .fa-twitter:hover {
        color: #1DA1F2;
    }

/*Quantity step counter*/
.input-number-group input[type=number]::-webkit-inner-spin-button,
.input-number-group input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

.input-number-group .input-group-button {
    line-height: calc(50px/2 - 5px);
}

.input-number-group .input-number {
    width: 40px;
    /*padding: 0 12px;*/
    font-size: 0.8rem;
    vertical-align: top;
    text-align: center;
    outline: none;
    display: block;
    margin: 0;
}

.input-number-group .input-number,
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
    border: 1px solid #cacaca;
    height: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 0;
}

.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
    display: inline-block;
    width: 20px;
    background-color: #2c4957;
    border-radius: 3px;
    color: white;
    border: none;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
}

.input-number-group .input-number-decrement {
    margin-right: 0.3rem;
}

.input-number-group .input-number-increment {
    margin-left: 0.3rem;
}

/*Start of homepage*/

/*Icons*/
/*.StaticRocket {
    position:absolute;
    z-index: 2;
}*/

/*.StaticRocket:hover {
    opacity: 0;
}

.AnimatedRocket {
    opacity: 0;
}

.AnimatedRocket:hover {
    opacity: 100;
}*/


/*Animation for icons*/
.pulsate-bck {
    -webkit-animation: pulsate-bck 10s ease-in-out infinite both;
    animation: pulsate-bck 10s ease-in-out infinite both;
}

@-webkit-keyframes pulsate-bck {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1.02);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.85);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1.02);
    }
}

@keyframes pulsate-bck {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1.02);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.85);

    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1.02);
    }
}

.spinanimation {
    -webkit-animation: spinanimation 20s linear infinite;
    animation: spinanimation 15s linear infinite;
}

@-webkit-keyframes spinanimation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinanimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ymoveanimation {
    -webkit-animation: ymoveanimation 10s ease-in-out infinite;
    animation: ymoveanimation 10s ease-in-out infinite;
}

@-webkit-keyframes ymoveanimation {
    0% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }

    25% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    75% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }

    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes ymoveanimation {
    0% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }

    25% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }

    75% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }

    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

.HomepageTopContent {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.HomepageMargin {
    margin: 100px 0px 100px 0px;
}


/*Surrent socks area*/
.CurrentSocksAvailable {
    color: #2c4957;
}

@media screen and (min-width: 768px) {
    .CurrentSocksAvailable .row .col-md-4:nth-child(1) {
        padding-top: 50px;
        /*padding-left: 40px;*/
        /*padding-right: 35px;*/
        background-image: url(../images/Homepage/CurrentSocks/Left-Smoke-Square.png);
        background-size: 100% 100%;
        position: relative;
        z-index: 1;
    }

    .CurrentSocksAvailable .row .col-md-4:nth-child(2) {
        padding-top: 30px;
        /*padding-left: 30px;*/
        /*padding-right: 30px;*/
        padding-bottom: 20px;
        background-image: url(../images/Homepage/CurrentSocks/Middle-Smoke.png);
        background-size: cover;
        background-position-x: center;
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: -30px;
        margin-right: -30px;
        z-index: 0;
    }

    .CurrentSocksAvailable .row .col-md-4:nth-child(3) {
        padding-top: 50px;
        /*padding-left: 35px;*/
        /*padding-right: 50px;*/
        background-image: url(../images/Homepage/CurrentSocks/Right-Smoke-Square.png);
        background-size: 100% 100%;
        background-position-x: right;
        position: relative;
        z-index: 1;
    }

    .CurrentSocksAvailable .row .col-md-4 img {
        padding-bottom: 20px;
    }

    .CurrentSocksAvailable .row .col-md-4 {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media screen and (max-width: 767px) {
    .CurrentSocksAvailable .row {
        background-image: url(../images/Homepage/CurrentSocks/Mobile-Cloud.png);
        background-size: 100% 100%;
        padding:20px;
    }
}


.SmokeSockCountdown p {
    position: relative;
    top: -75px;
    margin-bottom: -60px !important;
    right: 2px;
    font-size: 20px;
    letter-spacing: 11px;
    color: white;
    text-align: center;
}

.SmokeSockCountdown span {
    position: relative;
    bottom: -15px;
}

.CurrentSockRocket {
    position:relative;
    top: -350px;
    right: -170px;
    z-index: 2;
}

.HomepageAstoroids {
    position:relative;
    top: 500px;
}

.HomepageAstoroids img {
    position:absolute;
    z-index: -1;
}


/*Meteor area*/
@media screen and (min-width: 991px) {
    .MeteorContainer {
        position: relative;
        top: -500px;
        margin-bottom: -500px;
    }
}

.MeteorSockCountdown {
    position:relative;
    top: -40px;
    margin-bottom: 30px;
}

.MeteorImage {
    z-index: 2;
    position: relative;
}

.MeteorSockCountdown p {
    position: relative;
    top: -90px;
    margin-bottom: -90px;
    /*right: 3px;*/
    font-size: 40px;
    letter-spacing: 20px;
    color: white;
    text-align: center;
}

.MeteorSockCountdown span {
    position:relative;
    bottom: -40px;
    font-size: 20px;
}

.ThisMonthsSock {
    width: 280px;
    position: relative;
    top: -450px;
    margin-bottom: -400px;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
}


/*Small device*/
@media screen and (max-width: 574px) {
    .ThisMonthsSock {
        width: 210px;
        position: relative;
        top: -335px;
        margin-bottom: -280px;
        z-index: 3;
        margin-left: auto;
        margin-right: auto;
    }
}

/*Mobile device*/
@media screen and (max-width: 499px) {
    .ThisMonthsSock {
        width: 210px;
        position: relative;
        top: -265px;
        margin-bottom: -230px;
        z-index: 3;
        margin-left: auto;
        margin-right: auto;
    }
}

.BonusSignText {
    width: 275px;
    position: relative;
    top: -180px;
    margin-bottom: -180px;
}

.BonusSignText .row p {
    font-size: 25px;
}

    /*Show us your mtsocks game area*/
    .MtSocksGameSocialIcons a {
        font-size: 20px;
        display: inline;
        color: white;
    }

.MiniGalleryBigCloud {
    position:relative;
    /*top: -35px;*/
    /*z-index: -1;*/
}

.HomepageCloudBackground {
    z-index: 0;
    position: absolute;
    bottom: 1250px;
    z-index: -1;
}

.HomepageEmailSubscribe {
    background-image: url(../images/Background/Homepage-Mountains.png);
    background-position: center;
    height: 726px;
    margin-bottom: -241px;
}

.MountainFormContainer {
    color: #2c4957;
    align-self: flex-end;
    padding-bottom: 150px;
}

.DownArrowBorder {
    position: relative;
    border-bottom: 1px solid #f6921f;
    text-align: center;
    margin-bottom: 30px;
}


.IconInfoContainer {
    position: relative;
    display: inline-block;
}

    .IconInfoContainer .IconInfoBox {
        border-color: #e5e8ea;
        visibility: hidden;
        width: 175px;
        background: #e5e8ea;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 102%;
    }

        .IconInfoContainer .IconInfoBox::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #e5e8ea;
        }

    .IconInfoContainer:hover .IconInfoBox {
        visibility: visible;
    }

    .IconInfoContainer .IconInfoBox a {
        color: #2c4957;
        text-decoration: underline;
    }

.DownArrowBorder p {
    margin: 0;
}

    .DownArrowBorder:after, .DownArrowBorder:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .DownArrowBorder:after {
        border-color: rgba(255, 255, 255, 0);
        border-width: 10px;
        margin-left: -10px;
    }

    .DownArrowBorder:before {
        border-color: rgba(246, 146, 31, 0);
        border-top-color: #f6921f;
        border-width: 10px;
        margin-left: -10px;
    }
/*End of homepage*/


/*Start of Gallery style*/
@media screen and (min-width: 768px) {

    .MountainFormContainer {
        margin-right: 45px;
    }


    .StepContainer .row .col-md-2:nth-of-type(odd) {
        padding-top: 60px;
    }

    .StepContainer .row .col-md-3:nth-of-type(even) {
        padding-top: 60px;
    }
    
    .StepContainer .row .col-md-4:nth-of-type(even) {
        padding-top: 60px;
    }

    .StepContainer .row .col-md-6:nth-of-type(even) {
        padding-top: 60px;
    }

    .GalleryContainer .row {
        margin-left: -80px;
        margin-right: -80px;
    }
}

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

    .StepContainer .row .col-lg-4:nth-of-type(even) {
        padding-top: 60px;
    }

    .StepContainer .row .col-lg-4:nth-of-type(odd) {
        padding-bottom: 60px;
    }
}

.GalleryContainer {
    overflow:hidden;
    position:relative;
}

.GalleryImage {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin: 1.66%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
    color: #2c4957;
    margin-bottom: 30px;
}

    .GalleryImage .GalleryImageTextContainer {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 25px;
        color: #fff;
        padding: 15px;
        -moz-transition: all 0.4s ease-in-out 0s;
        -webkit-transition: all 0.4s ease-in-out 0s;
        -ms-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
        overflow:hidden;
    }
    
    .GalleryImage,
    .GalleryImage * {
        box-sizing: border-box;
    }

        .GalleryImage:hover .GalleryImageTextContainer,
        .GalleryImage.active .GalleryImageTextContainer {
            opacity: 1;
        }

        .GalleryImage .GalleryImageText {
            text-align: center;
            font-size: 18px;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            color: #2c4957;

        }
/*End of Gallery style*/


/*Start of cart*/
.OrderDetailBox {
    background-color: #e0e7ea;
    padding: 15px;
    border-radius: 15px;
}

    .OrderDetailBox .ShoppingCartItems {
        border-bottom: 1px solid #c1c1c1;
    }
    .OrderDetailBox .ShoppingCartItems:last-child {
        border-bottom: none;
    }

.OrderDetailBoxHeader {
    color: #2c4957;
}

.ShoppingCartItem p {
    margin: 0;
}

.RemoveCartButton {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #a3a4a7;
}

.RemoveCartButton:hover {
    color: red;
}

/*End of cart*/


/* Start of All Products Page */

.RocketSubscribeText {
    position:relative;
    top: -90px;
    max-width: 550px;
    margin-right: 10px;
    float:right;
}

.SubscribeRocket {
    position:relative;
    top: -30px;
    left:-5px;
}

@media screen and (max-width: 991px) {
    .RocketSubscribeText {
        max-width: 550px;
        margin-left: 0px;
        padding-left: 15px;
        padding-right: 15px;
        float: right;
    }
}

.ProductItemBoxContainer {
    margin-top: 20px;
    border-radius: 15px;
    background-color: #e0e8ea;
    text-align: center;
    overflow: hidden;
}

.ProductItemBox {
    padding: 10px;
}

    .ProductItemBox p {
        color: #2c4957;
    }

    .ProductItemBox button {
        border-radius: 0;
    }

/* End of All Products Page */


/* Start of Individual Product Page*/

.SockImageBox {
    border-radius: 15px;
    background-color: #e0e8ea;
    text-align: center;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px;
}

.SockInformationBox {
    border-radius: 15px;
    background-color: #e0e8ea;
    text-align: center;
    overflow: hidden;
    padding: 20px;
    color: #2c4957;
}

.SockInformationBox h6 {
    text-align: left;
}

.SockCountdown p {
    position: relative;
    top: -60px;
    right: 3px;
    font-size: 23px;
    letter-spacing: 10px;
    color: white;
    text-align: center;
}

.SocksRemainingLabel {
    position: relative;
    top: -30px;
}

.HotAirBalloon {
    position:relative;
}

.HotAirBalloonBanner {
    display:block;
}

.HotAirBalloonText {
    margin-left: 10px;
    text-align:center;
    position:relative;
    width:195px;
    top:-180px;
}

/* End of Individual Product Page*/

/* Start of About Page */
.AboutInformationContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.AboutInformationItem img {
    margin-bottom: 15px;
}

.AboutInformationItem p {
    text-align: justify;
    text-align-last: center;
}
/* End of About Page */


/* Start of Order History */
.OrderHistoryContainer {
    background-color: #e2ebed;
    border-radius: 15px;
    padding: 15px;
    color: #2c4957;
    margin-top:20px;
}

.OrderHistoryRow:hover {
    background-color: #f6f8f9;
    cursor:pointer;
    user-select:none;
}

.OrderHistoryProductRow img {
    /*max-width:60px;*/
}
/* End of Order History */


/* Start of Checkout Page */

.CheckoutSectionContainer {
    background-color: #e2ebed;
    border-radius: 15px;
    padding: 25px;
    color: #2c4957;
}

#AddressForm input {
    border: 1px solid rgb(0,32,50);
}

#AddressLabel:focus {
    outline:none;
}

#AddressForm select {
    border: 1px solid rgb(0,32,50);
}

.PaymentModal {
    border-radius: 15px;
}

.QRContainer {
    border: 1px solid #cecdcc;
    border-radius: 10px;
}

/*Tabs*/
.tabs {
    border-radius: 7px;
}

.HightlightedTab {
    background-color: white;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f1;
}

#BitcoinTab {
    border-radius: 10px 0px 0px 0px;
}

#LightningTab {
    border-radius: 0px 10px 0px 0px;
}

.UnhighlightedTab {
    background-color: #f0f1f1;
    cursor: pointer;
}

.CopyAddressButton {
    font-size: 25px;
    color: #abc3c6;
    cursor: pointer;
}

.AddressLabelContainer {
    color: #abc3c6;
    border: 2px solid #abc3c6;
    border-radius: 5px;
    padding: 5px;
    font-size: 13px;
    text-align: center;
}

.AddressLabel {
    color: #abc3c6;
}

.QRModalFooter {
    background-color: #1cc1e5;
    color: white;
    border-radius: 0px 0px 15px 15px;
}

.QRModalFooter:hover {
    text-decoration: none;
    color: white;
}
/* End of Checkout Page */

/* Start of Team */
.TeamContainer {
    border-radius: 15px;
    background-color: #e0e8ea;
    text-align: center;
    overflow: hidden;
    padding: 15px;
    color: #2c4957;
    height: 100%;
}

.TwitterImage {
    background-size:cover;
    border-radius: 10px;
    min-height: 100px;
    min-width: 100px;
}

#DannyTwitter {
    background-image: url(../images/Team/CoinCornerDanny.jpg);
}

#ZakkTwitter {
    background-image: url(../images/Team/CoinCornerZakk.jpg);
    background-position: center;
}

#MattTwitter {
    background-image: url(../images/Team/CoinCornerMatt.jpg);
}

#LouisTwitter {
    background-image: url(../images/Team/CoinCornerLouis.jpg);
}

#MollyTwitter {
    background-image: url(../images/Team/CoinCornerMolly.jpg);
    background-position: center;
}

#JoTwitter {
    background-image: url(../images/Team/CoinCornerJo.jpg);
}

.MainTeamImage {
    border-radius: 15px;
}

@media screen and (max-width: 991px) {
    .TwitterImage {
        min-height: 200px;
    }
}

.HelicopterTextContainer {
    max-width: 550px;
    position: relative;
    top: -55px;
    left:25px;
}

@media screen and (max-width: 991px) {
    .HelicopterTextContainer {
        max-width: 527px;
        left: 12px;
    }
}

/* End of Team */

/* Start of Proof of Sock */
.StepLabel {
    border-radius: 15px;
    background: #f6921f;
    color: white;
    padding: 5px 20px 5px 20px;
    display:inline-flex;
}

.VerifyToggleContainer {
    display:inline-flex;
}

.VerifyToggle {
    border: 1px solid #f6921f;
    padding: 10px 15px 10px 15px;
    min-width: 150px;
    user-select: none;
    cursor:pointer;
    background-color: white;
    color: #f6921f;
}
    .VerifyToggle:nth-child(1) {
        border-radius: 5px 0px 0px 5px;
    }
    .VerifyToggle:nth-child(2) {
        border-radius: 0px 5px 5px 0px;
    }

.VerifyToggleHighlighted {
    background-color: #f6921f !important;
    color: white !important;
}

.ProofOfSockStepText {
    background-color: #e5eef1;
    color: #004b84;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-break: break-word;
}

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

    .ProofOfSockStepText {
        min-height: 200px;
    }
}

/* End of Proof of Sock */
/* Start of Terms & Conditions */
.TermsContainer {
    background-color: #e0e8ea;
    border-radius: 15px;
    color: #2c4957;
    padding: 25px 50px 25px 50px;
}

    .TermsContainer ol {
        counter-reset: item
    }

    .TermsContainer ol li {
        display: block
    }

    .TermsContainer ol li:before {
        content: counters(item, ".") ". ";
        counter-increment: item
    }
/* End of Terms & Conditions */

/* Start of FAQs */

.FAQContainer {
    background-color: #e0e8ea;
    border-radius: 15px;
    color: #2c4957;
    padding: 25px 50px 25px 50px;
}

/* End of FAQs */

/* Start of 404 page */
.NotFoundSpaceman {
    position: relative;
    left: 30px;
    -webkit-animation: SpacemanAnimation 10s ease-in-out infinite;
    animation: SpacemanAnimation 10s ease-in-out infinite;
}

@-webkit-keyframes SpacemanAnimation {
    0% {
        -webkit-transform: translateY(7%);
        transform: translateY(7%);
    }

    50% {
        -webkit-transform: translateY(-7%);
        transform: translateY(-7%);
    }

    100% {
        -webkit-transform: translateY(7%);
        transform: translateY(7%);
    }
}

@keyframes SpacemanAnimation {
    0% {
        -webkit-transform: translateY(7%);
        transform: translateY(7%);
    }

    50% {
        -webkit-transform: translateY(-7%);
        transform: translateY(-7%);
    }

    100% {
        -webkit-transform: translateY(7%);
        transform: translateY(7%);
    }
}
/* End of 404 page */

/* Start of Sales Styling */
.SalesStrikethrough {
    position: relative;
    width: fit-content;
    color: #9c9c9c !important;
    margin-left: auto;
    margin-right: auto;
}

    .SalesStrikethrough:before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        right: 0;
        border-top: 2px solid;
        border-color: red;
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

.RibbonContainer {
    position:relative;
    z-index:4;
}

.ribbon {
    width: 125px;
    height: 125px;
    overflow: hidden;
    position: absolute;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #dc7704;
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 20px 15px 0px;
        background-color: #f6921f;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        color: #fff;
        font: 400 18px/1 'Baloo', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-align: center;
    }

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

    .ProductContainer-ribbon-top-right {
        top: 10px !important;
    }

    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }

    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }

    .ribbon-top-right span {
        left: -25px;
        top: 30px;
        transform: rotate(45deg);
    }
/* End of Sales Styling */