body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 22px;
}

.content {
    position: relative;
    text-align: center;
    margin: 50px 30px;
    transition: opacity .3s;
    opacity: 0;
}

    .content.show {
        opacity: 1;
    }

#loading {
    width: 90px;
    animation: loadTurn 1s infinite;
    animation-timing-function: linear;
}

@keyframes loadTurn {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

a {
    color: var(--secondary-color);
    text-decoration: none;
}

    a:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

.textIfNotLoad {
    opacity: 0;
}

.loadWindow .textIfNotLoad {
    animation: opacityLoad 1s;
    animation-fill-mode: forwards;
}

@keyframes opacityLoad {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*shop*/
.shop .wrapper {
    position: relative;
    margin: 0 auto;
}

.shop header {
    border-bottom: solid 1px #DDD;
}

.shop .header-brand {
    padding: 27px 30px 30px 30px;
    max-width: 1540px;
    margin: 0 auto;
    position: relative;
}

    .shop .header-brand img {
        height: var(--hd-logo-height-desktop);
    }

.shop footer {
    color: var(--primary-color-text);
    background: var(--primary-color);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

    .shop footer.tooTiny {
        position: relative;
        bottom: auto;
    }

    .shop footer .containerFooter {
        padding: 55px 30px 30px 30px;
        max-width: 1540px;
        margin: 0 auto;
        position: relative;
    }

        .shop footer .containerFooter:after {
            content: "";
            display: block;
            clear: both;
        }

.shop .logoFooter {
    float: left;
}

    .shop .logoFooter img {
        height: var(--ft-logo-height-desktop);
    }

.shop .socialIcons {
    float: right;
}

    .shop .socialIcons p {
        margin: 0 0 10px 0;
        font-size: 16px;
    }

    .shop .socialIcons a {
        color: var(--primary-color-text);
        display: block;
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 15px;
    }

        .shop .socialIcons a:hover {
            color: var(--primary-color-text);
            text-decoration: none;
        }

.shop .container-btn {
    margin-top: 35px;
}

.shop .btn {
    color: var(--primary-color-text);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    margin-top: 20px;
    padding: 15px 30px;
    border-radius: 3px;
    transition: all 0.3s;
}

    .shop .btn:hover {
        color: var(--primary-color);
        background-color: var(--primary-color-text);
        text-decoration: none;
    }

    .shop .btn:active {
        color: var(--primary-color);
        background-color: var(--primary-color-text);
        box-shadow: 0 0 10px rgba(0,0,0,.4) inset;
    }

@media (max-width:768px) {
    .shop .header-brand img {
        height: var(--hd-logo-height-mobile);
    }

    .shop .logoFooter, .shop .socialIcons {
        float: none;
    }

    .shop .socialIcons {
        margin-top: 30px;
    }

        .shop .socialIcons p {
            margin-left: 0;
        }

    .shop .logoFooter img {
        height: var(--ft-logo-height-mobile);
    }
}

/*Success*/
.content.success .font-color {
    color: #009581;
    font-size: 24px;
}

.content.error .font-color {
    color: #cf0e2f;
    font-size: 24px;
}

.content.success svg, .content.error svg {
    width: 150px;
    height: 150px;
}

@keyframes scaleAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

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

@keyframes drawCircle {
    0% {
        stroke-dashoffset: 151px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 36px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#successAnimationCircle {
    stroke-dasharray: 151px 151px;
    stroke: #009581;
}

#successAnimationCheck {
    stroke-dasharray: 36px 36px;
    stroke: #009581;
}

#successAnimationResult {
    fill: #009581;
    opacity: 0;
}

.error #successAnimationCircle {
    stroke-dasharray: 151px 151px;
    stroke: #cf0e2f;
}

.error #successAnimationCheck {
    stroke-dasharray: 36px 36px;
    stroke: #cf0e2f;
}

.error #successAnimationResult {
    fill: #cf0e2f;
    opacity: 0;
}

#successAnimation.animated {
    -webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
    animation: 1s ease-out 0s 1 both scaleAnimation;
}

    #successAnimation.animated #successAnimationCircle {
        -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
        animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
    }

    #successAnimation.animated #successAnimationCheck {
        -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
        animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
    }

    #successAnimation.animated #successAnimationResult {
        -webkit-animation: 0.3s linear 0.9s both fadeIn;
        animation: 0.3s linear 0.9s both fadeIn;
    }