/**
* 2007-2019 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2019 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
.product__need-sizes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.product__need-sizes p {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    width: 100%;
    margin: 23px 0 17px;
    font: normal 16px/1.4 Montserrat,Arial,sans-serif;
    color: #373e66
}

.product__need-sizes a {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    display: block;
    width: calc(50% - 20px);
    min-width: 240px;
    padding: 18px 10px;
    font: 300 16px/1.4 Montserrat,Arial,sans-serif;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.product__need-sizes a:active,.product__need-sizes a:focus,.product__need-sizes a:hover {
    color: #fff;
    background: #000
}

.product__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10002;
    display: none;
    max-width: 600px;
    max-height: calc(100vh - 30px);
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    background: #fff;
    -webkit-box-shadow: 10.6px 10.6px 49px 0 rgba(114,113,192,0.47);
    box-shadow: 10.6px 10.6px 49px 0 rgba(114,113,192,0.47);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

/* Brand accent bar on top of the modal. */
.product__modal::before {
    content: "";
    display: block;
    height: 4px;
    background-image: -webkit-linear-gradient(207deg, #9320ff 1%, #6e3bff);
    background-image: linear-gradient(243deg, #9320ff 1%, #6e3bff)
}

@media (max-width: 1199px) {
    .product__images {
        width:50%
    }

    .product__images-list {
        display: none
    }

    .product__info {
        width: 50%;
        padding-left: 30px
    }

    .product__need-sizes a {
        width: 100%;
        margin-bottom: 15px
    }

    .product__modal {
        max-width: calc(100% - 30px)
    }
}
.sew-by-order {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 38px 45px 45px
}

.sew-by-order__image {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    /* width: calc(50% - 20px) */
}

.sew-by-order__image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

.sew-by-order__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    /* width: calc(50% - 20px) */
}

.sew-by-order__heading {
    width: 100%;
    margin: 0 0 10px;
    font: normal 22px/1.3 "ProximaNova-Extrabld","ProximaNova-Bold","Open Sans",sans-serif;
    color: #373e66;
    letter-spacing: 1.8px;
    text-transform: uppercase
}

.sew-by-order__desc {
    width: 100%;
    margin: 0 0 28px;
    font: 400 15px/1.55 Open Sans,Arial,sans-serif;
    color: #707187
}

.sew-by-order__label {
    position: relative;
    display: block
}

.sew-by-order__label span {
    display: block;
    margin-bottom: 8px;
    font: 600 14px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66
}

.sew-by-order__label--50 {
    width: calc(50% - 12px)
}

.sew-by-order__label--100 {
    width: 100%
}

.sew-by-order__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 40px 0 16px!important;
    margin-bottom: 24px;
    font: 400 15px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66;
    border: 1px solid #e8e9f7;
    background: #fff;
    outline: none;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.sew-by-order__input.success {
    background: #fff url(../img/check-mark.svg) no-repeat calc(100% - 10px) 50%/11px
}

.sew-by-order__input.error {
    border-color: #e13e3e;
    background: #fff url(../img/close-cross.svg) no-repeat calc(100% - 10px) 50%/11px
}

.sew-by-order__input.error:focus {
    border-color: #e13e3e
}

.sew-by-order__input:focus {
    border-color: #6e3bff
}

.sew-by-order__select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 20px!important;
    margin-bottom: 35px;
    font: 300 16px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66;
    border: 1px solid #e6e6e6;
    background: #fff;
    outline: none;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.sew-by-order__select:focus {
    border-color: #373e66
}

.sew-by-order__warning {
    font: 400 12px/1.5 Open Sans,Arial,sans-serif;
    color: #e13e3e
}

.sew-by-order__textarea {
    display: block;
    width: 100%;
    height: 90px;
    padding: 10px 16px;
    margin-bottom: 24px;
    font: 400 15px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66;
    border: 1px solid #e8e9f7;
    background: #fff;
    outline: none;
    resize: vertical;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.sew-by-order__textarea:focus {
    border-color: #6e3bff
}

.sew-by-order__button {
    display: block;
    width: 100%;
    max-width: none;
    padding: 18px 20px;
    font: bold 14px/1.6 "Open Sans",sans-serif;
    color: #fff;
    letter-spacing: 1.4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    background-image: -webkit-linear-gradient(207deg, #9320ff 1%, #6e3bff);
    background-image: -o-linear-gradient(207deg, #9320ff 1%, #6e3bff);
    background-image: linear-gradient(243deg, #9320ff 1%, #6e3bff);
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.sew-by-order__button:active,.sew-by-order__button:focus,.sew-by-order__button:hover {
    background: #181918
}

.sew-by-order .attributes__list span {
    margin-bottom: 5px
}

.sew-by-order .attributes__item {
    margin-right: 12px
}

@media (min-width: 992px) {
    .sew-by-order__warning {
        position:absolute;
        left: 60px;
        top: -32px;
        margin: 0;
        padding: 20px 35px;
        text-transform: lowercase;
        background: #fff;
        border: 1px solid #e6e6e6;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.1)
    }

    .sew-by-order__warning:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        bottom: -2em;
        left: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1em solid #000;
        border-color: transparent transparent #fff #fff;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-box-shadow: -2px 3px 3px 0 rgba(0,0,0,.1);
        box-shadow: -2px 3px 3px 0 rgba(0,0,0,.1)
    }
}

@media (max-width: 991px) {
    .sew-by-order {
        padding:30px 20px 25px
    }

    .sew-by-order__image {
        width: 100%;
        margin-bottom: 20px
    }

    .sew-by-order__form,.sew-by-order__label--50 {
        width: 100%
    }
}

.btn-close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    border: none;
    cursor: pointer;
    opacity: .65;
    background: transparent url(../img/close-cross-dark.svg) no-repeat 50%/12px;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out
}

.btn-close-modal:hover,
.btn-close-modal:focus {
    opacity: 1
}
.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}
.circle_wrapper {
    height: 370px;
    display: block;
    border-radius: 100%;
}

.circle {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -120px;
    background-color: teal;
    overflow: hidden;
    border-radius: 100%;
    transition: background-color 200ms ease;
    animation: spin 2s linear infinite;
    animation-play-state: paused;
}

.circle::after {
    content: '';
    display: block;
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -90px;
    background-color: transparent;
    position: absolute;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 24px 60px 60px 4.8px rgba(0, 235, 255, 0.25), 0 -24px 60px 4.8px rgba(255, 255, 0, 0.55), 24px 0 60px 4.8px rgba(0, 128, 53, 0.35), -24px 60px 60px 4.8px rgba(0, 255, 255, 0.75), 0.54px -0.54px 0 18px rgba(128, 128, 255, 0.25), 0.54px 0.36px 0 18px rgba(128, 255, 128, 0.25), -0.18px 0.54px 0 18px rgba(26, 255, 255, 0.5);
}

.circle::before {
    content: '';
    display: block;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -120px;
    position: absolute;
    z-index: 11;
    border-radius: 50%;
    box-shadow: inset 0 0 15px 1px rgba(0, 0, 0, 0.35);
}

.circle_over {
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    font-weight: bold;
    font-size: 108px;
    text-transform: uppercase;
    margin-left: -90px;
    margin-top: -90px;
    position: absolute;
    display: inline-block;
    z-index: 12;
    overflow: hidden;
    border-radius: 100%;
    text-align: center;
}

.circle_over .check {
    font-size: 144px;
    position: absolute;
    font-family: 'random';
    line-height: 180px;
    width: 180px;
    height: 180px;
    font-family: 'random';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 100%;
    transition: opacity 400ms ease-in, text-shadow 200ms linear;
}

.circle_over .check.blur {
    color: #18272a;
    text-shadow: 0px 2px 0 rgba(255, 255, 255, 0.15);
    background: #ececec;
    opacity: 1;
}

.circle_over .check.lime {
    background-image: radial-gradient(#00ffff, #00ff00);
    color: transparent;
    -webkit-background-clip: text;
    opacity: 0;
}

.circle_over .check.fade {
    color: #2c3b3e;
    opacity: 1;
}

a.circle_wrapper .circle {
    animation-play-state: running;
    background-color: #02898b;
}

a.circle_wrapper .check.lime {
    opacity: 1;
}

a.circle_wrapper .check.fade {
    opacity: 0;
}

a.circle_wrapper .check.blur {
    text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.15);
}

.pfspreorder-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(20, 20, 35, .72);
}

body.pfspreorder-modal-open {
    overflow: hidden;
}

.pfspreorder-versions {
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.pfspreorder-versions legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    font: 600 14px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66;
    border: 0;
}

.pfspreorder-versions label {
    display: inline-flex;
    align-items: center;
    margin: 0 22px 6px 0;
    font: 400 15px/1.4 Open Sans,Arial,sans-serif;
    color: #373e66;
    cursor: pointer;
}

/* The theme hides native checkboxes globally; restore them inside the popup. */
.pfspreorder-versions input[type="checkbox"] {
    display: inline-block;
    -webkit-appearance: checkbox;
    appearance: auto;
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
    accent-color: #6e3bff;
    cursor: pointer;
}

.pfspreorder-error {
    width: 100%;
    margin: 0 0 15px;
    font: 400 14px/1.4 Open Sans,Arial,sans-serif;
    color: #b42318;
    text-align: center;
}

.pfspreorder-success-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 48px;
    line-height: 72px;
    text-align: center;
    border-radius: 50%;
    background: #25a55f;
}

.owner-feedback__success {
    width: 100%;
    text-align: center;
}

.owner-feedback__success.visuallyhidden {
    width: 1px !important;
}

@media (max-width: 767px) {
    .product__modal {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
    }

    .sew-by-order__input,
    .sew-by-order__textarea {
        margin-bottom: 18px;
    }
}