body {
    padding-top: 50px;
    padding-bottom: 20px;
}

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

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

#navStyle {
    background-color: #5da96a;
    padding-top: 0px;
}

#mainbackground {
    background-color: white;
    background-position: center;
    background-size: cover;
    background-image: url('../../Content/img/bg1.png');
    padding-top: 0px;
}

#goodbye {
    height: 50vh;
    background-repeat: no-repeat;
    background-color: white;
    background-position: center;
    background-size: contain;
    background-image: url('../../Content/img/gbye.png');
    padding: 0px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}


    textarea:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="color"]:focus,
    .uneditable-input:focus {
        border-radius: 15px;
        border-color: none;
        outline: 0 none;
        transition: .3s;
    }


    input::-webkit-input-placeholder {
        color: white;
    }

input {
    border-color: none;
    outline: 0 none;
    border-style: none;
    transition: .3s;
}



/*UNSUB CSS*/
.xmark {
    height: 100px;
    width: 100px;
    border-radius: 5px;
    position: relative;
}

    .xmark:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: "\274c"; /* use the hex value here... */
        font-size: 50px;
        color: #FA6900;
        line-height: 100px;
        text-align: center;
    }
:root {
    --text-color: #646B8C;
    --headline-color: #2B3044;
    --mail: #555B77;
    --mail-triangle: #494F69;
    --mail-background: #404660;
    --mail-shadow: #D1D6EE;
    --paper: #5da96a;
    --paper-border: #D1D6EE;
    --confirm-color: #fff;
    --confirm-background: #275EFE;
    --box-paddle: #404660;
    --box-ball: #275EFE;
    --controls-text: #646B8C;
    --controls-icon: #646B8C;
    --controls-background: #E1E6F9;
}

#unsubscribe button,
#box button {
    outline: none;
    border: none;
    display: table;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    padding: 8px 20px;
    line-height: 21px;
    border-radius: 7px;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#unsubscribe .letter {
    width: 84px;
    height: 72px;
    margin: 0 auto 32px auto;
    position: relative;
    animation: letter 2s ease infinite;
}

    #unsubscribe .letter:before, #unsubscribe .letter:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 48px;
        z-index: 1;
    }

    #unsubscribe .letter:before {
        background: var(--mail);
        clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
    }

    #unsubscribe .letter:after {
        background: var(--mail-triangle);
        clip-path: polygon(0 100%, 50% 55%, 100% 100%);
    }

    #unsubscribe .letter .background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--mail-background);
        clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%);
    }

    #unsubscribe .letter .shadow {
        background: black;
        width: 92px;
        height: 4px;
        border-radius: 50%;
        position: absolute;
        top: 108%;
        left: -4px;
        background: var(--mail-shadow);
        animation: shadow 2s ease infinite;
    }



    #unsubscribe .letter .body {
        width: 360px;
        height: 230px;
        bottom: 0;
        left: -138px;
        border-radius: 5px;
        background: var(--paper);
        box-shadow: inset 0 0 0 1px var(--paper-border);
        position: absolute;
        transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
    }

        #unsubscribe .letter .body .box {
            width: 360px;
            height: 260px;
            position: relative;
            transition: opacity .3s ease .8s;
        }

            #unsubscribe .letter .body .box .headline {
                position: absolute;
                left: 0;
                right: 0;
                top: -32px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transform: translateZ(0);
            }

                #unsubscribe .letter .body .box .headline span {
                    color: var(--headline-color);
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 24px;
                }

                #unsubscribe .letter .body .box .headline .close {
                    cursor: pointer;
                }

                    #unsubscribe .letter .body .box .headline .close svg {
                        width: 20px;
                        height: 20px;
                        display: block;
                        fill: var(--text-color);
                        padding: 3px;
                    }

            #unsubscribe .letter .body .box .ball {
                background: var(--box-ball);
                border-radius: 50%;
                width: 16px;
                height: 16px;
                left: 0;
            }

            #unsubscribe .letter .body .box .controls {
                bottom: -80px;
                left: 0;
                right: 0;
                position: absolute;
            }

                #unsubscribe .letter .body .box .controls span {
                    display: block;
                    text-align: center;
                    margin-bottom: 12px;
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--controls-text);
                }


                    #unsubscribe .letter .body .box .controls div button {
                        width: 64px;
                        padding: 8px 0;
                        margin: 0;
                        background: var(--controls-background);
                    }

                        #unsubscribe .letter .body .box .controls div button:not(:last-child) {
                            margin-right: 16px;
                        }

                        #unsubscribe .letter .body .box .controls div button svg {
                            width: 20px;
                            height: 20px;
                            display: block;
                            margin: 0 auto;
                            fill: var(--controls-icon);
                        }

            #unsubscribe .letter .body .box .start {
                position: absolute;
                text-align: center;
                white-space: nowrap;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                transition: opacity .3s;
            }

                #unsubscribe .letter .body .box .start button {
                    color: var(--confirm-color);
                    background: var(--confirm-background);
                }

                #unsubscribe .letter .body .box .start small {
                    margin: 4px 0 0 0;
                    display: block;
                    font-style: italic;
                    font-size: 12px;
                    color: var(--text-color);
                }

            #unsubscribe .letter .body .box:not(.idle) .start {
                opacity: 0;
                pointer-events: none;
            }

            #unsubscribe .letter .body .box:not(.init) .ball {
                opacity: 0;
            }

.shadow-modal {
   
}

#unsubscribe h1 {
    text-align: center;
    margin: 0 0 8px 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 24px;
    color: var(--headline-color);
}

#unsubscribe p {
    text-align: center;
    padding: 15px;
    font-size: 25px;
    color: var(--text-color);
}

#unsubscribe .cta {
    margin-top: 32px;
}

    #unsubscribe .cta button {
        color: var(--confirm-color);
        background: var(--confirm-background);
    }

#unsubscribe:not(.show-box) .letter .body .box {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
}

#unsubscribe.show-box .letter {
    animation-play-state: paused;
}

    #unsubscribe.show-box .letter .body {
        animation: paper .8s linear forwards;
    }

    #unsubscribe.show-box .letter .shadow {
        animation-play-state: paused;
    }

#unsubscribe.hide-box .letter .body {
    animation: paper-back .8s linear forwards;
}

@keyframes paper {
    30% {
        z-index: 0;
        box-shadow: 5px 10px 10px 6px rgba(0,0,0,0);
    }

    60%, 100% {
        z-index: 5;
    }

    60% {
        transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
        box-shadow: 5px 30px 30px 10px rgba(0,0,0,.10);
    }

    100% {
        transform: translateY(63%) translateZ(0);
        box-shadow: 5px 50px 47px 13px rgba(0,0,0,.18);
    }
}

@keyframes paper-back {
    0% {
        transform: translateY(63%) translateZ(0);
       
    }

    30% {
        transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
       
    }

    60% {
        z-index: 0;
        transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
       
    }

    0%, 30% {
        z-index: 2;
    }

    100% {
        transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
        
    }
}

@keyframes letter {
    50% {
        transform: translateY(-4px);
    }
}

@keyframes shadow {
    50% {
        opacity: .7;
        transform: translateY(4px) scale(0.8);
    }
}



* {
    box-sizing: inherit;
}

    *:before, *:after {
        box-sizing: inherit;
    }



    body .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
    }

        body .dribbble img {
            display: block;
            height: 28px;
        }

    body .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
    }

        body .twitter svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 800px){
    h3{font-size:1.5rem !important;} /*1rem = 16px*/
}