/*
    SaD
    V1.0
*/

/*
    @media (max-width: 575.98px)                         {  }
    @media (min-width: 576px) and (max-width: 767.98px)  {  }
    @media (min-width: 768px) and (max-width: 991.98px)  {  }
    @media (min-width: 992px) and (max-width: 1199.98px) {  }
    @media (min-width: 1200px)                           {  }
*/

/*
    Typography
*/

@import url('https://fonts.googleapis.com/css?family=Hepta+Slab:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

@media (max-width: 575.98px)                         { span, p { font-size: 16px; } }
@media (min-width: 576px) and (max-width: 767.98px)  { span, p { font-size: 15px; } }
@media (min-width: 768px) and (max-width: 991.98px)  { span, p { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { span, p { font-size: 15px; } }
@media (min-width: 1200px)                           { span, p { font-size: 16px; } }

em {
    font-style: normal;
    font-weight: 700;
}

.crux {
    position: relative;
    display: inline-block;
    line-height: 12px;
}

.crux::after {
    content: '';
    width: 100%;
    height: 1.5px;
    background-color: red;
    position: absolute;
    top: 5px;
    left: 0;
    transform: rotate(18deg);
}

.crux::before {
    content: '';
    width: 100%;
    height: 1.5px;
    background-color: red;
    position: absolute;
    top: 5px;
    left: 0;
    transform: rotate(-18deg);
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .offer {
        font-size: 3.8vw !important;
    }
}
@media (max-width: 575.98px) {
    .offer {
        font-size: 5vw !important;
    }
}

.offer {
    font-size: 3.2vw;
}


/*
    Stuff
*/

html, html body {
    font-family: 'Hepta Slab', serif;
    font-weight: 300 !important;
    color: #4b4b4b;
    height: 100%;
    background-color: #fafafa;
}

.container-fluid {
    max-width: 1440px !important;
}


/*
    Header
*/

header {

}


/*
    Separator
*/

.arrow-line {
    position: relative;
    box-sizing: border-box;
    height: 2px;
    border-top: 2px solid #4b4b4b;
    z-index: 10;
    margin-top: 25px;
    margin-bottom: 25px;
}

@media (max-width: 575.98px) {
    .arrow-line::after {
        left: 44.6% !important;
    }
}

.arrow-line::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    top: -2px;
    left: 47.6%;
    box-sizing: border-box;
    border: 2px solid;
    border-color: transparent transparent #4b4b4b #4b4b4b;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    z-index: 20;
    background: #fafafa;
    border-top-right-radius: 40px;
}


/*
    Sbam! price!
*/

.sbam.square {
    border-radius: 15px;
}

@media (max-width: 575.98px) {
    .sbam.square .credits,
    .sbam.square .prices {
        padding: 10px 0px !important;
    }
}

.sbam.square .credits,
.sbam.square .prices {
    padding: 20px 0px;
    color: white;
    display: block;
}

.sbam.square .credits {
    font-weight: 600;
    font-family: 'Raleway', serif;
}

.sbam.square .prices {
    font-weight: 500;
}

.sbam.square .credits {
    font-size: 20px;
}

.sbam.square .sbammer {
    height: 1px;
    width: 100%;
    background-color: white;
}

.sbam.square.red {
    background-color: #e83d2e;
}

.sbam.square.green {
    background-color: #a9cc7c;
}

.sbam.square.blue {
    background-color: #2fbbdb;
}

.sbam.square.orange {
    background-color: #ff9500;
}

@media (max-width: 575.98px) {
    .sbam.circle {
        border-radius: 0px !important;
        position: relative;
        height: 80px;
    }
}

.sbam.circle {
    border-radius: 50%;
    position: relative;
    z-index: 10;
    text-align: center;
}

.sbam.circle.pink {
    background-color: #ff9cb2;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .sbam.circle .conditions {
        top: 13% !important;
        font-size: 3.2vw !important;
        line-height: 4.1vw !important;
    }
}
@media (max-width: 575.98px) {
    .sbam.circle .conditions {
        top: 12% !important;
        font-size: 5vw !important;
        line-height: 7.1vw !important;
    }
}

@media (min-width: 1440px) {
    .sbam.circle .conditions {
        font-size: 31.6667px !important;
        line-height: 44.6333px !important;
    }
}

.sbam.circle .conditions {
    top: 10%;
    color: black;
    font-size: 2.2vw;
    line-height: 3.1vw;
    font-weight: 400;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .sbam.circle .discount {
        font-size: 13vw !important;
    }
}
@media (max-width: 575.98px) {
    .sbam.circle .discount {
        font-size: 10vw !important;
    }
}

@media (min-width: 1440px) {
    .sbam.circle .discount {
        font-size: 129.6px !important;
        line-height: 194.4px !important;
    }
}

.sbam.circle .discount {
    bottom: 26%;
    color: white;
    font-size: 9vw;
    font-weight: 600;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .sbam.circle .end {
        font-size: 5vw !important;
    }
}
@media (max-width: 575.98px) {
    .sbam.circle .end {
        font-size: 5vw !important;
        bottom: 13% !important;
    }
}

@media (min-width: 1440px) {
    .sbam.circle .end {
        font-size: 56.8px !important;
        line-height: 86.4px !important;
    }
}

.sbam.circle .end {
    bottom: 20%;
    color: white;
    font-size: 4vw;
}

@media (max-width: 575.98px) {
    .sbam.circle .discount {
        left: 15px !important;
        right: inherit !important;
        top: 28% !important;
        transform: translateY(-50%);
    }
}

@media (max-width: 575.98px) {
    .sbam.circle .conditions {
        left: 33% !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
}

@media (max-width: 575.98px) {
    .sbam.circle .end {
        left: 15px !important;
        right: inherit !important;
        top: 68% !important;
        transform: translateY(-50%);
    }
}

.sbam.circle .conditions,
.sbam.circle .discount,
.sbam.circle .end {
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}


/*
    Wow container
*/

@media (max-width: 575.98px) {
    .wow.wow_circle {
        margin-top: 20px !important;
    }
    .wow.wow_circle_b {
        margin-bottom: 20px !important;
    }
}

.wow.wow_circle_b,
.wow.wow_circle {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .wow {
        text-align: center;
        padding: 14px 15px !important;
    }
}

.wow {
    text-align: center;
    padding: 30px 15px;
}

@media (max-width: 575.98px) {
    .wow .wow-img {
        margin-bottom: 15px !important;
    }
}

.wow .wow-img {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}

@media (max-width: 575.98px) {
    .wow .wow-h {
        min-height: inherit !important;
    }
}

.wow .wow-h {
    min-height: 70px;
    display: block;
}

@media (max-width: 575.98px) {
    .wow .wow-h.wow-h-special {
        min-height: inherit !important;
    }
}

.wow .wow-h.wow-h-special {
    min-height: 150px;
    display: block;
}

@media (max-width: 575.98px) {
    .wow .wow-p {
        margin: 10px 0px;
        min-height: inherit !important;
    }
}

.wow .wow-p {
    margin: 10px 0px;
    min-height: 68px;
    display: block;
    font-family: 'Raleway', serif;
}

.wow a, .wow a:active, .wow a:hover {
    color: #4b4b4b;
    text-decoration: none;
}
/*
    Full box
*/

.full-box.box.no-m {
    margin-bottom: 0px;
}

.full-box.box {
    margin-bottom: 40px;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box.box {
        margin-bottom: 0px;
    }
}
@media (max-width: 575.98px) {
    /* TODO */
}

.full-box > .container,
.full-box > .container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box-img {
        padding-top: 60% !important;
    }
}
@media (max-width: 575.98px) {
    /* TODO */
}

.full-box-img {
    padding-top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    z-index: 10;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box-img .full-box-img-logo {
        width: 25vw !important;
    }
}
@media (max-width: 575.98px) {
    .full-box-img .full-box-img-logo {
        left: inherit !important;
        right: 10px !important;
        width: 30vw !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
}

.full-box-img .full-box-img-logo {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 17.4vw;
    z-index: 30;
    max-width: 250px;
}

.full-box-img .full-box-img-logo > a > img {
    width: 100%;
    height: auto;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box-img .full-box-img-intro {
        width: 48vw !important;
        padding: 15px 0px !important;
    }
}
@media (max-width: 575.98px) {
    .full-box-img .full-box-img-intro {
        width: 57vw !important;
        padding: 5px 0px !important;
        bottom: 2.3vw !important;
        left: 10px !important;
        right: inherit !important;
        border: 0px !important;
    }
}

.full-box-img .full-box-img-intro {
    position: absolute;
    bottom: 3.8vw;
    right: 0px;
    width: 43vw;
    padding: 20px 0px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    z-index: 30;
    max-width: 619px;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box-img .full-box-img-intro > p {
        font-weight: 500 !important;
        font-size: 2.2vw !important;
    }
}
@media (max-width: 575.98px) {
    .full-box-img .full-box-img-intro > p {
        font-weight: 500 !important;
        font-size: 3.7vw !important;
    }
}

@media (min-width: 1440px) {
    .full-box-img .full-box-img-intro > p {
        font-size: 33.6833px !important;
    }
}

.full-box-img .full-box-img-intro > p {
    color: white;
    font-weight: 400;
    font-size: 2.34vw;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .full-box-img .full-box-img-circle {
        bottom: -35vw !important;
        right: inherit !important;
        left: -55vw !important;
        width: 120vw !important;
        height: 120vw !important;
    }
}

@media (min-width: 1440px) {
    .full-box-img .full-box-img-circle {
        right: -201.6px !important;
        bottom: -518.4px !important;
    }
}

.full-box-img .full-box-img-circle {
    position: absolute;
    bottom: -36vw;
    right: -14vw;
    width: 76.4vw;
    height: 76.4vw;
    border-radius: 50%;
    background-color: rgba(202, 142, 1, 0.8);
    z-index: 20;
    max-width: 1100px;
    max-height: 1100px;
}


/*
    Hiden
*/

@media (min-width: 576px) and (max-width: 767.98px)  {
    .hide_man_btn.btn {
        display: block !important;
    }
}
@media (max-width: 575.98px) {
    .hide_man_btn.btn {
        display: block !important;
        margin-bottom: 0px !important;
    }
}

.hide_man_btn.btn {
    display: none;
    margin: 0 auto;
    color: white;
    background-color: #3a64ec !important;
    margin-bottom: 20px;
}

@media (min-width: 576px) and (max-width: 767.98px)  {
    .full-box.box .hide_man {
        height: 0;
    }
}
@media (max-width: 575.98px) {
    .full-box.box .hide_man {
        height: 0;
    }
}

.hide_man {
    height: auto;
    overflow: hidden;
}


/*
    Form
*/

.mail-form {
    margin-bottom: 30px;
}

.mail-form label {
    color: #3a64ec;
    font-family: 'Raleway', serif;
    margin-bottom: 0;
}

::-webkit-input-placeholder { /* Edge */
    color: #3a64ec !important;
}

:-ms-input-placeholder { /* Internet Explorer */
    color: #3a64ec !important;
}

::placeholder {
    color: #3a64ec !important;
}

.mail-form .form-group select,
.mail-form .form-group input[type="number"],
.mail-form .form-group input[type="text"],
.mail-form .form-group input[type="email"] {
    height: 49px;
    padding: 14px 20px 14px 16px;
    border: 1px solid #3a64ec;
    border-radius: 6px;
    width: 100%;
    color: #3a64ec !important;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    font-family: 'Raleway', serif;
}
@media (max-width: 575.98px) {
	.mail-form .form-group select,
	.mail-form .form-group input[type="number"],
	.mail-form .form-group input[type="text"],
	.mail-form .form-group input[type="email"] {
		padding-left: 0px;
		padding-right: 0px;
	}
}

.mail-form .btn {
    display: block;
    margin: 0 auto;
    color: white;
    background-color: #3a64ec !important;
}

.mail-form .btn:hover {
    font-weight: 600;
    color: white;
}

.mail-form .btn:disabled {
    color: white;
    cursor: not-allowed;
}

.form_error {
    text-align: center;
    color: white;
    background-color: red;
    display: block;
}

.form_success {
    text-align: center;
    color: white;
    background-color: green;
    display: block;
}

.mail-form #flf_check_cf {
    float: right;
    margin-top: -50px;
    height: 20px;
    width: 20px;
    margin-right: 8px;
}

.mail-form #flf_check_cf i.far.fa-times-circle {
    color: red;
    font-size: 20px;
}

.mail-form #flf_check_cf i.far.fa-check-circle {
    color: green;
    font-size: 20px;
}


/*
    Form checkbox
*/

.checkbox {
    position: relative;
    margin-top: 20px;
}

.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 50px;
}

.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    top: 5px;
    border: 1px solid #3a64ec;
    border-radius: 3px;
    background-color: #A5BAFB;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    top: 5px;
    padding-left: 2px;
    font-size: 28px;
    line-height: 34px;
}

.checkbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 5px;
    left: 0px;
}

.checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked + label::after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f00c";
}

.checkbox input[type="checkbox"]:disabled + label {
    opacity: 0.65;
}

.checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #3a64ec;
    cursor: not-allowed;
}

.checkbox input[type="checkbox"]:checked + label::before {
    background-color: #3a64ec;
    border-color: #3a64ec;
}

.checkbox input[type="checkbox"]:checked + label::after {
    color: #fff;
}










/*
    Form radio
*/

.radio {
    position: relative;
    margin-top: 3px;
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 50px;
}
@media (max-width: 575.98px) {
	.radio label {
	    padding-left: 35px;
	    padding-top: 5px;
	}	
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    top: 5px;
    border: 1px solid #3a64ec;
    border-radius: 16px;
    background-color: #A5BAFB;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    top: 5px;
    padding-left: 2px;
    font-size: 28px;
    line-height: 34px;
}

.radio input[type="radio"] {
    opacity: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 5px;
    left: 0px;
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.radio input[type="radio"]:checked + label::after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f00c";
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.radio input[type="radio"]:disabled + label::before {
    background-color: #3a64ec;
    cursor: not-allowed;
}

.radio input[type="radio"]:checked + label::before {
    background-color: #3a64ec;
    border-color: #3a64ec;
}

.radio input[type="radio"]:checked + label::after {
    color: #fff;
}












/*
    Footer
*/

footer {
    background-color: #3a64ec;
    padding: 20px 0;
    color: white;
}