/* customize */

/* Primary color:			#8F1E25 */
/* Primary color hover:		#b91a23 */
/* Primary color opacity:	rgba(143, 30, 37,*/
/* Radius for block:		border-radius: 10px;*/
/* Radius for input:		border-radius: 3px;*/

@keyframes blinkButton {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(100px) scaleY(1.5) scaleX(0.8);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }
    15% {
        opacity: 1;
        visibility: visible;
        transform: translateY(-20px) scaleY(0.98) scaleX(1.02);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }

    32% {
        opacity: 1;
        visibility: visible;
        transform: translateY(5px) scaleY(1.02);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }
    50% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px) scaleY(1);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }
    60% {
        transform: scale(1) rotate(-15deg);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 20px rgba(143, 30, 37, 0);
    }
    61% {
        transform: scale(1.1) rotate(15deg);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }
    80% {
        transform: scale(1) rotate(-15deg);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 20px rgba(143, 30, 37, 0);
    }
    81% {
        transform: scale(1.1) rotate(15deg);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0);
    }
    90% {
        transform: scale(1);
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 0px rgba(143, 30, 37, 0.5);
    }
    100% {
        opacity: 1;
        visibility: visible;
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
            0 0px 0px 20px rgba(143, 30, 37, 0);
        transform: scale(1);
    }
}
@keyframes blinkInfo {
    0% {
        transform: translateY(10px) scale(0.3) rotate(-10deg);
        opacity: 0;
        visibility: hidden;
    }
    60% {
        transform: translateY(10px) scale(0.3) rotate(-20deg);
        opacity: 0;
        visibility: hidden;
    }
    75% {
        transform: translateY(-2px) scale(1) rotate(4deg);
        opacity: 1;
        visibility: visible;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fade {
    0% {
        transform: scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}

.callYou {
    font-family: Arial, Helvetica, sans-serif;
}

.callYou ::-webkit-input-placeholder {
    color: #777;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.callYou ::-moz-placeholder {
    color: #777;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.callYou :-ms-input-placeholder {
    color: #777;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.callYou ::placeholder {
    color: #777;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.callYou a.callYou-button {
    box-sizing: border-box;
    text-decoration: none;
    position: fixed;
    bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    right: 30px;
    background: #8f1e25 url('../images/tel.svg');
    background-position: 11px 50%;
    background-size: auto 64%;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: block;
    color: #fff;
    padding: 10px 15px 10px 40px;
    min-width: 60px;
    min-height: 60px;
    border: 3px solid #8f1e25;
    z-index: 1000;
    box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5),
        0 0px 0px 0px rgba(143, 30, 37, 0.5);
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    /* opacity: 0; */
    /* visibility: hidden; */
}

.callYou .callYou-info {
    box-sizing: border-box;
    text-decoration: none;
    position: fixed;
    bottom: 95px;
    font-size: 14px;
    font-weight: bold;
    right: 30px;
    background: #fff;
    background-position: 11px 50%;
    background-size: auto 64%;
    background-repeat: no-repeat;
    border-radius: 10px;
    display: block;
    color: #282828;
    padding: 13px 18px;
    min-width: 59px;
    min-height: 60px;
    border: 1px solid #ccc;
    box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5);
    transition: all 0.35s ease-out;
    transform-origin: 90% 90%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
}

.callYou a.callYou-button.callYou--open {
    -webkit-animation: blinkButton ease 3s 1s both;
    animation: blinkButton ease 3s 1s both;
    /* opacity: 1;
	visibility: visible; */
}
.callYou .callYou-info.callYou--open {
    -webkit-animation: blinkInfo ease 3s 1s forwards;
    animation: blinkInfo ease 3s 1s forwards;
    /* opacity: 1;
	visibility: visible; */
}
.callYou a.callYou-button:hover {
    background-color: #b91a23;
    border-color: #b91a23;
}
.callYou a.callYou-button:active {
    background-color: #b91a23;
    border-color: #ffc9b9;
}

.callYou--minimalize a.callYou-button {
    transform: scale(0.6) translate(58px, 31px);
    animation: none !important;
    visibility: visible;
    opacity: 1;
}
.callYou--minimalize > .callYou-cross,
.callYou--minimalize .callYou-info {
    display: none;
}

.callYou .callYou-cross {
    position: absolute;
    padding: 5px;
    right: 7px;
    top: 0px;
    color: #888;
    font-size: 20px;
    background: none;
    border: none;
}

.callYou .callYou-cross {
    color: #000000;
    background: none;
    border: none;
}

.callYou-cross:after {
    content: '+';
    line-height: 0em;
    display: inline-block;
    position: relative;
    transform: rotate(45deg);
}

.callYou-button .callYou-cross {
    top: -14px;
    right: -13px;
}

.callYou-info .callYou-cross {
    top: -5px;
    right: -1px;
}

.callYou-box .callYou-cross {
    font-size: 30px;
    padding: 1px 10px;
}

.callYou > button.callYou-cross {
    opacity: 0;
    position: fixed;
    bottom: 65px;
    right: 24px;
    top: auto;
    opacity: 0;
    -webkit-animation: fade ease 0.5s 1.5s forwards;
    animation: fade ease 0.5s 1.5s forwards;
    transition: all 0.75s ease-out;
}
/* 
.callYou:hover > button.callYou-cross {
    opacity: 1;
} */

.callYou-count {
    box-sizing: border-box;
    font-size: 11px;
    position: absolute;
    border-radius: 10px;
    height: 20px;
    text-align: center;
    min-width: 20px;
    padding: 2px;
    top: -7px;
    left: -7px;
    background: #8f1e25;
    border: 2px solid #fff;
    opacity: 0;
    -webkit-animation: blinkInfo ease 3s 4s forwards;
    animation: blinkInfo ease 3s 4s forwards;
}

.callYou .callYou-info::before {
    content: '';
    position: absolute;
    /* background: #fff; */
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 55.8%,
        rgba(255, 255, 255, 0) 56%
    );
    border: 1px solid #ccc;
    transform: rotate(-45deg);
    /* border-width: 0 0 1px 1px; */
    border-top-color: rgba(255, 255, 255, 0);
    border-right-color: rgba(255, 255, 255, 0);
    top: calc(100% - 7px);
    right: 22px;
    height: 14px;
    width: 14px;
    box-shadow: -5px 5px 7px -3px rgba(0, 0, 0, 0.1);
}

.callYou .callYou-box {
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    position: fixed;
    left: 0px;
    top: 0px;
    /* margin: -10px; */
    bottom: 0px;
    right: 0px;
    transition: all 0.25s ease-out;
    z-index: 1010;
    /* padding: 10px; */
    transform: translateY(10px) scale(0.9);
    opacity: 0;
    visibility: hidden;
}
@media screen and (min-width: 600px) {
    .callYou .callYou-box {
        max-width: 570px;
        max-height: 498px;
        box-shadow: 0 3px 13px -7px rgba(0, 0, 0, 0.5);
        border: 1px solid #ccc;
        margin: auto;
    }
}
@media screen and (max-width: 700px) {
    .callYou {
        display: none;
    }
}
.callYou .callYou-box.callYou--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.callYou-box-tab-nav {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
}
.callYou-box-tab-nav-el {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    border-bottom: 3px solid #f1f1f1;
    background: none;
}

.callYou-box-tab-nav-el:after {
    content: '';
    transition: all 0.12s ease-in;
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #8f1e25;
    height: 3px;
    transform: scaleX(1.2) translateX(80%);
    opacity: 0;
}

.callYou-box-tab-nav-el.callYou-box-tab-nav-el--active:after {
    transform: scaleX(1);
    opacity: 1;
    transition: all 0.15s ease-out;
}

.callYou-box-tab-nav-el.callYou-box-tab-nav-el--active
    ~ .callYou-box-tab-nav-el:after {
    transform: scaleX(1.2) translateX(-80%);
}

a.callYou-box-tab-nav-el-link {
    box-sizing: border-box;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    transition: all 0.25s ease-out;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}

a.callYou-box-tab-nav-el-link:hover,
.callYou-box-tab-nav-el--active a.callYou-box-tab-nav-el-link {
    color: #8f1e25;
}

.callYou-box-tabs {
    position: relative;
    box-sizing: border-box;
    height: calc(100% - 62px);
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100% - 62px);
}

.callYou-box-tabs-el {
    box-sizing: border-box;
    /* display: none; */
    padding: 10px;
    position: absolute;
    display: table;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out,
        max-height 0.25s ease-out 0.25s;
    max-height: 0;
}

.callYou-box-tabs-el--active {
    transform: scale(1);
    opacity: 1;
    max-height: 100vh;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out,
        max-height 0s ease-out 0s;
}
.callYou-box-tabs-el--active ~ .callYou-box-tabs-el {
    transform: translateX(100%);
}

.callYou-box-tabs-el form {
    box-sizing: border-box;
    display: table-cell;
    /* height: 300px; */
    vertical-align: middle;
    text-align: center;
}

.callYou .callYou-box-header {
    color: #8f1e25;
    text-align: center;
    font-size: 19px;
    display: block;
    padding: 5px 0 30px;
}

.callYou .callYou-input {
    background: #fff;
    border: 1px solid #ccc;
    padding: 13px;
    margin-top: 5px;
    width: 35%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1em;
    display: inline-block;
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0px 1px 7px -4px rgba(0, 0, 0, 0.3) inset;
}
.callYou textarea.callYou-input {
    min-height: 142px;
}

.callYou .required-light {
    border-color: red !important;
}
.callYou .required-light-text {
    color: red !important;
}

.callYou .callYou-box .callYou-submit {
    box-sizing: border-box;
    display: inline-block;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 14px 25px;
    margin-top: 5px;
    border: 1px solid #8f1e25;
    background: #8f1e25;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1em;
    min-height: 40px;
}

.callYou .callYou-box select:focus,
.callYou .callYou-box select:hover,
.callYou .callYou-box textarea:focus,
.callYou .callYou-box textarea:hover,
.callYou .callYou-box input:focus,
.callYou .callYou-box input:hover {
    border: 1px solid #8f1e25;
}

@media screen and (min-width: 600px) {
    .callYou .callYou-input--big {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }
    .callYou .callYou-input--small {
        width: 40%;
        display: inline-block;
        vertical-align: top;
    }

    .callYou-input--big .callYou-input,
    .callYou-input--small .callYou-input,
    .callYou-input--big .callYou-submit,
    .callYou-input--small .callYou-submit {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .callYou .callYou-input {
        width: 90%;
    }
}

.callYou fieldset {
    border: none;
    font-size: 13px;
}
.hide {
    display: none;
}

.to-top {
    display: none;
}