@charset "UTF-8";
.arcontactus-widget {
opacity: 0;
transition: .2s opacity;
line-height: 1
}
.arcontactus-widget * {
box-sizing: border-box
}
.arcontactus-widget.left.arcontactus-message {
left: 20px;
right: auto
}
.arcontactus-widget.left .arcontactus-message-button {
right: auto;
left: 0
}
.arcontactus-widget.left .arcontactus-prompt {
left: 80px;
right: auto;
transform-origin: 0 50%
}
.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top {
left: 0;
right: auto
}
.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top:before {
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 0 none;
left: 25px;
right: auto
}
.arcontactus-widget.left .arcontactus-prompt:before {
border-right: 8px solid #fff;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
right: auto;
left: -15px
}
.arcontactus-widget.left .messangers-block {
right: auto;
left: 0;
-webkit-transform-origin: 10% 105%;
-ms-transform-origin: 10% 105%;
transform-origin: 10% 105%
}
.arcontactus-widget.left .callback-countdown-block {
left: 0;
right: auto
}
.arcontactus-widget.left .messangers-block::before,
.arcontactus-widget.left .callback-countdown-block::before {
left: 25px;
right: auto
}
.arcontactus-widget.hg.arcontactus-message {
width: 100px;
height: 100px
}
.arcontactus-widget.hg .messangers-block,
.arcontactus-widget.hg .callback-countdown-block,
.arcontactus-widget.hg .arcu-popup {
bottom: 110px
}
.arcontactus-widget.hg .arcontactus-prompt {
bottom: 5px
}
.arcontactus-widget.hg .icons-line {
top: 22px;
left: 24px
}
.arcontactus-widget.hg.left .messangers-block:before,
.arcontactus-widget.hg.left .callback-countdown-block:before,
.arcontactus-widget.hg.left .arcu-popup:before {
left: 41px
}
.arcontactus-widget.hg.left .arcontactus-prompt {
left: 110px;
bottom: 26px
}
.arcontactus-widget.hg.right .messangers-block:before,
.arcontactus-widget.hg.right .callback-countdown-block:before,
.arcontactus-widget.hg.right .arcu-popup:before {
right: 41px
}
.arcontactus-widget.hg.right .arcontactus-prompt {
right: 110px;
bottom: 26px
}
.arcontactus-widget.hg .arcontactus-message-button {
width: 100px;
height: 100px
}
.arcontactus-widget.hg .arcontactus-message-button .pulsation {
width: 114px;
height: 114px;
border-radius: 60px
}
.arcontactus-widget.hg .arcontactus-message-button .icons {
width: 70px;
height: 70px;
margin-top: -35px;
margin-left: -35px
}
.arcontactus-widget.hg .arcontactus-message-button .callback-state {
width: 70px;
height: 70px;
margin-top: -35px;
margin-left: -35px
}
.arcontactus-widget.md.arcontactus-message {
width: 60px;
height: 60px
}
.arcontactus-widget.md .messangers-block,
.arcontactus-widget.md .callback-countdown-block,
.arcontactus-widget.md .arcu-popup {
bottom: 70px
}
.arcontactus-widget.md .arcontactus-prompt {
bottom: 5px
}
.arcontactus-widget.md.left .messangers-block:before,
.arcontactus-widget.md.left .callback-countdown-block:before,
.arcontactus-widget.md.left .arcu-popup:before {
left: 21px
}
.arcontactus-widget.md.left .arcontactus-prompt {
left: 70px
}
.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top {
bottom: 70px;
left: 0;
right: auto
}
.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top:before {
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 0 none;
left: 21px;
right: auto
}
.arcontactus-widget.md.right .messangers-block:before,
.arcontactus-widget.md.right .callback-countdown-block:before,
.arcontactus-widget.md.right .arcu-popup:before {
right: 21px
}
.arcontactus-widget.md.right .arcontactus-prompt {
right: 70px
}
.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top {
right: 0;
bottom: 70px
}
.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top:before {
right: 21px
}
.arcontactus-widget.md .arcontactus-message-button {
width: 60px;
height: 60px
}
.arcontactus-widget.md .arcontactus-message-button .pulsation {
width: 74px;
height: 74px
}
.arcontactus-widget.md .arcontactus-message-button .icons {
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px
}
.arcontactus-widget.md .arcontactus-message-button .callback-state {
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px
}
.arcontactus-widget.sm.arcontactus-message {
width: 50px;
height: 50px
}
.arcontactus-widget.sm .messangers-block,
.arcontactus-widget.sm .callback-countdown-block,
.arcontactus-widget.sm .arcu-popup {
bottom: 60px
}
.arcontactus-widget.sm .arcontactus-prompt {
bottom: 0
}
.arcontactus-widget.sm.left .messangers-block:before,
.arcontactus-widget.sm.left .callback-countdown-block:before,
.arcontactus-widget.sm.left .arcu-popup:before {
left: 16px
}
.arcontactus-widget.sm.left .arcontactus-prompt {
left: 60px
}
.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top {
bottom: 60px;
left: 0;
right: auto
}
.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top:before {
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 0 none;
left: 16px;
right: auto
}
.arcontactus-widget.sm.right .messangers-block:before,
.arcontactus-widget.sm.right .callback-countdown-block:before,
.arcontactus-widget.sm.right .arcu-popup:before {
left: 16px;
}
.arcontactus-widget.sm.right .arcontactus-prompt {
right: 60px;
display: none;
}
.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top {
right: 0;
bottom: 60px
}
.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top:before {
right: 16px
}
.arcontactus-widget.sm .arcontactus-message-button {
width: 50px;
height: 50px
}
.arcontactus-widget.sm .arcontactus-message-button .pulsation {
width: 64px;
height: 64px
}
.arcontactus-widget.sm .arcontactus-message-button .icons {
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px
}
.arcontactus-widget.sm .arcontactus-message-button .static {
margin-top: -16px
}
.arcontactus-widget.sm .arcontactus-message-button .callback-state {
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px
}
.arcontactus-widget.active {
opacity: 1
}
.arcontactus-widget.arcontactus-message {
z-index: 1000000;
left: 25px;
bottom: 20px;
position: fixed !important;
height: 70px;
width: 70px;
}
.arcontactus-widget .arcontactus-message-button {
width: 70px;
position: absolute;
height: 70px;
right: 0;
background-color: red;
border-radius: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer
}
.arcontactus-widget .arcontactus-message-button p,
.arcontactus-widget .arcontactus-message-button .arcu-item-label {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
color: #fff;
font-weight: 700;
font-size: 10px;
line-height: 11px;
margin: 0
}
.arcontactus-widget .arcontactus-message-button .pulsation {
width: 84px;
height: 84px;
background-color: red;
border-radius: 50px;
position: absolute;
left: -7px;
top: -7px;
z-index: -1;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: arcontactus-pulse 2s infinite;
animation: arcontactus-pulse 2s infinite
}
.arcontactus-widget .arcontactus-message-button .icons {
background-color: #fff;
width: 44px;
height: 44px;
border-radius: 50px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px
}
.arcontactus-widget .arcontactus-message-button .static {
position: absolute;
top: 50%;
left: 50%;
margin-top: -19px;
margin-left: -26px;
width: 52px;
height: 52px;
text-align: center
}
.arcontactus-widget .arcontactus-message-button .static img {
display: inline
}
.arcontactus-widget .arcontactus-message-button .static svg {
width: 24px;
height: 24px;
color: #fff
}
.arcontactus-widget .arcontactus-message-button.no-text .static {
margin-top: -12px
}
.arcontactus-widget .pulsation:nth-of-type(2n) {
-webkit-animation-delay: .5s;
animation-delay: .5s
}
.arcontactus-widget .pulsation.stop {
-webkit-animation: none;
animation: none
}
.arcontactus-widget .icons-line {
top: 10px;
left: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
-webkit-transition: cubic-bezier(.13, 1.49, .14, -0.4);
-o-transition: cubic-bezier(.13, 1.49, .14, -0.4);
transition: cubic-bezier(.13, 1.49, .14, -0.4);
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
height: 24px;
transition: .2s all
}
.arcontactus-widget .icons-line.stop {
-webkit-animation-play-state: paused;
animation-play-state: paused
}
.arcontactus-widget .icons-line span {
display: inline-block;
width: 24px;
height: 24px;
color: red
}
.arcontactus-widget .icons-line span svg,
.arcontactus-widget .icons-line span i {
width: 24px;
height: 24px
}
.arcontactus-widget .icons-line span i {
display: block;
font-size: 24px;
line-height: 24px
}
.arcontactus-widget .icons-line img,
.arcontactus-widget .icons-line span {
margin-right: 40px
}
.arcontactus-widget .static {
transition: .2s all
}
.arcontactus-widget .static.hide {
transform: scale(0);
opacity: 0
}
.arcontactus-widget .icons {
transition: .2s all
}
.arcontactus-widget .icons.hide {
transform: scale(0);
opacity: 0
}
.arcontactus-widget .icons.hide .icons-line {
transform: scale(0)
}
.arcontactus-widget .icons .icon:first-of-type {
margin-left: 0
}
.arcontactus-widget .arcontactus-close {
color: #fff
}
.arcontactus-widget .arcontactus-close svg {
-webkit-transform: rotate(180deg) scale(0);
-ms-transform: rotate(180deg) scale(0);
transform: rotate(180deg) scale(0);
-webkit-transition: ease-in .12s all;
-o-transition: ease-in .12s all;
transition: ease-in .12s all;
display: block
}
.arcontactus-widget .arcontactus-close.show-messageners-block svg {
-webkit-transform: rotate(0) scale(1);
-ms-transform: rotate(0) scale(1);
transform: rotate(0) scale(1)
}
.arcontactus-widget .arcontactus-prompt {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.arcontactus-widget .messangers-block,
.arcontactus-widget .arcontactus-prompt,
.arcontactus-widget .arcu-popup {
background: #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
width: 300px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom: 80px;
left: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 10px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 7px;
-webkit-transform-origin: 80% 105%;
-ms-transform-origin: 80% 105%;
transform-origin: 80% 105%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: ease-out .12s all;
-o-transition: ease-out .12s all;
transition: ease-out .12s all;
z-index: 1000000;
}
.arcontactus-widget .messangers-block:before,
.arcontactus-widget .arcontactus-prompt:before,
.arcontactus-widget .arcu-popup:before {
position: absolute;
bottom: -7px;
left: 25px;
right: auto;
display: inline-block !important;
border-left: 8px solid transparent;
border-top: 8px solid #fff;
border-right: 8px solid transparent;
content: '';
}
.arcontactus-widget .messangers-block.show-messageners-block,
.arcontactus-widget .arcontactus-prompt.show-messageners-block,
.arcontactus-widget .arcu-popup.show-messageners-block {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.arcontactus-widget .arcu-popup {
padding: 0
}
.arcontactus-widget .arcu-popup .arcu-popup-header {
padding: 18px 15px;
color: #fff;
background: #787878;
border-radius: 7px 7px 0 0;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
margin-bottom: 0;
font-size: 17px;
position: relative;
line-height: 1.4
}
.arcontactus-widget .arcu-popup .arcu-popup-content {
padding: 10px;
max-height: 300px;
overflow: auto;
line-height: initial
}
.arcontactus-widget .arcontactus-prompt.arcu-prompt-top {
right: 0;
max-width: 260px;
bottom: 80px
}
.arcontactus-widget .arcontactus-prompt.arcu-prompt-top:before {
bottom: -7px;
right: 25px;
left: auto;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 0 none
}
.arcontactus-widget .messangers-block {
display: block
}
.arcontactus-widget .messangers-block.has-header {
padding-top: 0
}
.arcontactus-widget .messangers-block .arcu-menu-header {
padding: 18px 15px;
color: #fff;
background: #787878;
border-radius: 7px 7px 0 0;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
margin-bottom: 10px;
font-size: 17px;
position: relative;
line-height: 1.4
}
.arcontactus-widget .arcu-header-close,
.arcontactus-widget .arcu-popup-close,
.arcontactus-widget .arcu-popup-back {
position: absolute;
right: 0;
top: -30px;
padding: 0;
margin: 0;
border: 0 none;
background: none;
line-height: 1;
width: 26px;
height: 26px;
cursor: pointer;
color: #fff;
background: #787878;
border-radius: 50%;
text-align: center
}
.arcontactus-widget .arcu-header-close svg,
.arcontactus-widget .arcu-popup-close svg,
.arcontactus-widget .arcu-popup-back svg {
height: 12px;
width: 12px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -6px
}
.arcontactus-widget .arcu-popup-back {
right: auto;
left: 0;
top: 50%;
margin-top: -13px;
display: none
}
.arcontactus-widget .arcu-popup-back svg {
height: 16px;
width: 16px;
margin: -8px 0 0 -8px
}
.arcontactus-widget .arcontactus-prompt {
color: #787878;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
line-height: 18px;
width: auto;
bottom: 10px;
right: 80px;
white-space: nowrap;
padding: 14px 20px 14px
}
.arcontactus-widget .arcontactus-prompt:before {
border-right: 8px solid transparent;
border-top: 8px solid transparent;
border-left: 8px solid #fff;
border-bottom: 8px solid transparent;
bottom: 16px;
right: -15px
}
.arcontactus-widget .arcontactus-prompt.active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.arcontactus-widget .arcontactus-prompt:hover .arcontactus-prompt-close {
opacity: 1
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close {
opacity: 0;
transition: .2s all;
position: absolute;
right: -10px;
top: -10px;
padding: 0;
margin: 0;
border: 0 none;
background: none;
line-height: 1;
width: 26px;
height: 26px;
cursor: pointer;
color: #fff;
background: #787878;
border-radius: 50%;
text-align: center
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close svg {
height: 12px;
width: 12px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -6px
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing {
border-radius: 10px;
display: inline-block;
left: 3px;
padding: 0 0 0 3px;
position: relative;
top: 4px;
width: 50px
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div {
position: relative;
float: left;
border-radius: 50%;
width: 10px;
height: 10px;
background: #ccc;
margin: 0 2px;
-webkit-animation: arcontactus-updown 2s infinite;
animation: arcontactus-updown 2s infinite
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(2) {
animation-delay: .1s
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(3) {
animation-delay: .2s
}
.arcontactus-widget .messangers-block .messangers-list {
list-style: none;
margin: 0;
padding: 0
}
.arcontactus-widget .messangers-block .messangers-list li {
margin: 0;
padding: 0
}
.arcontactus-widget .messangers-block.sm .arcu-menu-header {
padding-top: 12px;
padding-bottom: 12px
}
.arcontactus-widget .messangers-block.sm .not-rounded-items .messanger {
padding-left: 42px
}
.arcontactus-widget .messangers-block.sm .messanger {
padding-left: 50px;
min-height: 44px;
padding-top: 4px;
padding-bottom: 4px
}
.arcontactus-widget .messangers-block.sm .messanger span {
height: 32px;
width: 32px;
margin-top: -16px
}
.arcontactus-widget .messangers-block.sm .messanger span svg,
.arcontactus-widget .messangers-block.sm .messanger span i {
height: 20px;
width: 20px;
line-height: 20px;
margin-top: -10px;
margin-left: -10px;
font-size: 21px
}
.arcontactus-widget .not-rounded-items .messanger {
padding-left: 48px
}
.arcontactus-widget .not-rounded-items .messanger span {
left: 5px
}
.arcontactus-widget .messanger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
cursor: pointer;
width: 100%;
padding: 8px 20px 8px 60px;
position: relative;
min-height: 54px;
text-decoration: none
}
.arcontactus-widget .messanger:hover {
background-color: #eee
}
.arcontactus-widget .messanger:before {
background-repeat: no-repeat;
background-position: center
}
.arcontactus-widget .messanger.facebook span {
background: #0084ff
}
.arcontactus-widget .messanger.viber span {
background: #7c529d
}
.arcontactus-widget .messanger.telegram span {
background: #2ca5e0
}
.arcontactus-widget .messanger.skype span {
background: #31c4ed
}
.arcontactus-widget .messanger.email span {
background: #ff8400
}
.arcontactus-widget .messanger.contact span {
background: #7eb105
}
.arcontactus-widget .messanger.call-back span {
background: #54cd81
}
.arcontactus-widget .messanger span {
position: absolute;
left: 10px;
top: 50%;
margin-top: -20px;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #0084ff;
margin-right: 10px;
color: #fff;
text-align: center;
vertical-align: middle
}
.arcontactus-widget .messanger span svg,
.arcontactus-widget .messanger span i {
width: 24px;
height: 24px;
vertical-align: middle;
text-align: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px
}
.arcontactus-widget .messanger span i {
font-size: 24px;
line-height: 24px
}
.arcontactus-widget .messanger p,
.arcontactus-widget .messanger .arcu-item-label {
margin: 0;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 15px;
color: rgba(0, 0, 0, 0.87);
padding: 0;
line-height: 17px
}
.arcontactus-widget .messanger p .arcu-item-subtitle,
.arcontactus-widget .messanger .arcu-item-label .arcu-item-subtitle {
font-size: 13px;
color: #787878
}
.arcontactus-widget .callback-countdown-block {
background: #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
width: 410px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom: 80px;
left: auto;
right: 0;
align-items: center;
border-radius: 7px;
-webkit-transform-origin: 80% 105%;
-ms-transform-origin: 80% 105%;
transform-origin: 80% 105%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: ease-out .12s all;
-o-transition: ease-out .12s all;
transition: ease-out .12s all;
z-index: 1000000;
color: red;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
display: none
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer_timer {
font-size: 38px;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif
}
.arcontactus-widget .callback-countdown-block.display-flex {
display: block
}
.arcontactus-widget .callback-countdown-block:before {
position: absolute;
bottom: -7px;
right: 25px;
left: auto;
display: inline-block !important;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
content: ''
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 15px;
line-height: 18px;
padding: 0 10px 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: none;
width: 100%;
position: relative
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone:before {
transition: .2s all
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:before {
background: rgba(255, 255, 255, 0.8);
content: ' ';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:after {
content: ' ';
position: absolute;
width: 30px;
height: 30px;
z-index: 2;
top: 50%;
bottom: 50%;
margin-top: -15px;
margin-bottom: -15px;
left: 50%;
margin-left: -15px;
background: url(//smarttrain.edu.vn/assets/themes/Avada/assets/img/ring-alt.gif) no-repeat transparent scroll 0 0
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone p,
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .arcu-item-label {
text-align: center;
margin-bottom: 10px;
margin-top: 3px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group {
align-items: center
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group {
margin-bottom: 10px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-required .arcu-form-label:after {
content: " *";
color: #c7254e
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox {
position: relative;
padding-left: 20px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox input {
position: absolute;
top: 2px;
left: 0;
width: 16px;
height: 16px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-label {
font-size: 14px;
margin-bottom: 3px;
color: #333
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-field {
display: block;
width: 100%;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 14px;
line-height: 16px;
border-radius: 4px;
border: 0;
height: 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 10px 6px;
border: 1px solid #ddd;
margin: 0 !important
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group textarea.arcu-form-field {
height: 80px;
resize: vertical;
max-height: 140px;
min-height: 60px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit] {
display: block;
width: 100%;
border-radius: 4px;
border: 0;
background-color: red;
color: #fff;
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 14px;
padding: 7px 5px 7px;
cursor: pointer;
height: 36px;
margin: 0;
line-height: 1
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]:hover {
opacity: .8
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry {
height: 140px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: none
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry p {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
line-height: 18px;
text-align: center;
margin-bottom: 5px;
margin-top: 7px;
width: 100%
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-close {
position: absolute;
right: 9px;
top: 9px;
padding: 0;
margin: 0;
border: 0 none;
background: none;
line-height: 1;
width: 26px;
height: 26px;
cursor: pointer;
color: #fff;
background: #787878;
border-radius: 50%;
z-index: 1;
text-align: center
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-close svg {
height: 12px;
width: 12px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -6px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 140px;
display: none
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer p {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
line-height: 21px;
text-align: center;
margin-bottom: 5px;
margin-top: 7px
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer h1 {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
font-size: 40px;
line-height: 46px;
text-align: center;
font-weight: 300
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.display-flex {
display: block
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer.display-flex,
.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry.display-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.arcontactus-widget .callback-state {
background-color: #fff;
width: 44px;
height: 44px;
border-radius: 50px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
display: none;
-webkit-animation: none;
animation: none;
z-index: 999999;
transition: .2s all;
transform: scale(0);
color: red;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.arcontactus-widget .callback-state.display-flex {
transform: scale(1)
}
.arcontactus-widget .callback-state svg {
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px
}
.arcontactus-widget .callback-state .callback-state-img {
position: absolute;
top: 12px;
left: 12px
}
.arcontactus-widget .animation-pause {
-webkit-animation-play-state: paused;
animation-play-state: paused
}
@-webkit-keyframes arcontactus-pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1
}
50% {
opacity: .5
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@media (max-width:468px) {
.arcontactus-widget.arcontactus-message.opened {
width: auto;
right: 20px;
left: 20px
}
.arcontactus-widget .callback-countdown-block {
width: auto
}
}
@media (max-height:400px) {
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close {
opacity: 1
}
}
@media (max-width:428px) {
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group {
display: block
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group input[type=tel],
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit] {
display: block;
width: 100%;
margin: 0 0 5px 0
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group input[type=tel] {
margin-bottom: 10px !important
}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.display-flex {
display: block;
width: 100%
}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close {
opacity: 1
}
.arcontactus-widget.arcontactus-message .messangers-block,
.arcontactus-widget.arcontactus-message .callback-countdown-block,
.arcontactus-widget.arcontactus-message .arcu-popup {
bottom: 0;
border-radius: 0
}
.arcontactus-widget.arcontactus-message.open,
.arcontactus-widget.arcontactus-message.opened,
.arcontactus-widget.arcontactus-message.popup-opened {
width: 100%;
left: 0;
right: 0;
bottom: 0
}
.arcontactus-widget.arcontactus-message.open .messangers-block .arcu-menu-header,
.arcontactus-widget.arcontactus-message.opened .messangers-block .arcu-menu-header,
.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcu-menu-header {
border-radius: 0;
padding-right: 40px
}
.arcontactus-widget.arcontactus-message.open .messangers-block .arcu-header-close,
.arcontactus-widget.arcontactus-message.opened .messangers-block .arcu-header-close,
.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcu-header-close {
right: 5px;
top: 50%;
margin-top: -13px
}
.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-header,
.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-header,
.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-header {
border-radius: 0;
padding-right: 40px;
padding-left: 30px
}
.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-back,
.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-back,
.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-back {
display: block
}
.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-close,
.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-close,
.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-close {
right: 5px;
top: 50%;
margin-top: -13px
}
.arcontactus-widget.arcontactus-message.open .messangers-block,
.arcontactus-widget.arcontactus-message.opened .messangers-block,
.arcontactus-widget.arcontactus-message.popup-opened .messangers-block,
.arcontactus-widget.arcontactus-message.open .callback-countdown-block,
.arcontactus-widget.arcontactus-message.opened .callback-countdown-block,
.arcontactus-widget.arcontactus-message.popup-opened .callback-countdown-block,
.arcontactus-widget.arcontactus-message.open .arcontactus-prompt,
.arcontactus-widget.arcontactus-message.opened .arcontactus-prompt,
.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-prompt,
.arcontactus-widget.arcontactus-message.open .arcu-popup,
.arcontactus-widget.arcontactus-message.opened .arcu-popup,
.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup {
width: 100%
}
.arcontactus-widget.arcontactus-message.open .messangers-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.opened .messangers-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.open .callback-countdown-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.opened .callback-countdown-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.popup-opened .callback-countdown-block .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.open .arcontactus-prompt .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.opened .arcontactus-prompt .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-prompt .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.open .arcu-popup .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcontactus-prompt-close,
.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcontactus-prompt-close {
opacity: 1
}
.arcontactus-widget.arcontactus-message.open .arcontactus-message-button,
.arcontactus-widget.arcontactus-message.opened .arcontactus-message-button,
.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-message-button {
display: none
}
}
@keyframes arcontactus-updown {
0%,
43%,
100% {
transform: translate(0, 0)
}
25%,
35% {
transform: translate(0, -10px)
}
}
@-webkit-keyframes arcontactus-updown {
0% {
transform: translate(0 0)
}
25% {
transform: translate(-10px 0)
}
35% {
transform: translate(-10px 0)
}
43% {
transform: translate(0 0)
}
100% {
transform: translate(0 0)
}
}
@keyframes arcontactus-pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1
}
50% {
opacity: .5
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@-webkit-keyframes arcontactus-show-stat {
0%,
20% {
-webkit-transform: scale(1);
transform: scale(1)
}
21%,
84% {
-webkit-transform: scale(0);
transform: scale(0)
}
85%,
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes arcontactus-show-stat {
0%,
20% {
-webkit-transform: scale(1);
transform: scale(1)
}
21%,
84% {
-webkit-transform: scale(0);
transform: scale(0)
}
85%,
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes arcontactus-show-icons {
0%,
20% {
-webkit-transform: scale(0);
transform: scale(0)
}
21%,
84% {
-webkit-transform: scale(1);
transform: scale(1)
}
85%,
100% {
-webkit-transform: scale(0);
transform: scale(0)
}
}
@keyframes arcontactus-show-icons {
0%,
20% {
-webkit-transform: scale(0);
transform: scale(0)
}
21%,
84% {
-webkit-transform: scale(1);
transform: scale(1)
}
85%,
100% {
-webkit-transform: scale(0);
transform: scale(0)
}
}
 .arcuAnimated {
animation-duration: 1s;
animation-fill-mode: both;
}
.arcuAnimated.infinite {
animation-iteration-count: infinite;
}
.arcuAnimated.hinge {
animation-duration: 2s;
}
.arcuAnimated.flipOutX,
.arcuAnimated.flipOutY,
.arcuAnimated.bounceIn,
.arcuAnimated.bounceOut {
animation-duration: .75s;
}
@keyframes arcu_bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.arcuAnimated.bounce {
animation-name: arcu_bounce;
transform-origin: center bottom;
}
@keyframes arcu_flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.arcuAnimated.flash {
animation-name: arcu_flash;
} @keyframes arcu_pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.arcuAnimated.pulse {
animation-name: arcu_pulse;
}
@keyframes arcu_rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
.arcuAnimated.rubberBand {
animation-name: arcu_rubberBand;
}
@keyframes arcu_shake {
from, to {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
.arcuAnimated.shake {
animation-name: arcu_shake;
}
@keyframes arcu_headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
.arcuAnimated.headShake {
animation-timing-function: ease-in-out;
animation-name: arcu_headShake;
}
@keyframes arcu_swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.arcuAnimated.swing {
transform-origin: top center;
animation-name: arcu_swing;
}
@keyframes arcu_tada {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.arcuAnimated.tada {
animation-name: arcu_tada;
} @keyframes arcu_wobble {
from {
transform: none;
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: none;
}
}
.arcuAnimated.wobble {
animation-name: arcu_wobble;
}
@keyframes arcu_jello {
from, 11.1%, to {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.arcuAnimated.jello {
animation-name: arcu_jello;
transform-origin: center;
}
@keyframes arcu_bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.arcuAnimated.bounceIn {
animation-name: arcu_bounceIn;
}
@keyframes arcu_bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
.arcuAnimated.bounceInDown {
animation-name: arcu_bounceInDown;
}
@keyframes arcu_bounceInLeft {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
.arcuAnimated.bounceInLeft {
animation-name: arcu_bounceInLeft;
}
@keyframes arcu_bounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
.arcuAnimated.bounceInRight {
animation-name: arcu_bounceInRight;
}
@keyframes arcu_bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.arcuAnimated.bounceInUp {
animation-name: arcu_bounceInUp;
}
@keyframes arcu_bounceOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
.arcuAnimated.bounceOut {
animation-name: arcu_bounceOut;
}
@keyframes arcu_bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.arcuAnimated.bounceOutDown {
animation-name: arcu_bounceOutDown;
}
@keyframes arcu_bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.arcuAnimated.bounceOutLeft {
animation-name: arcu_bounceOutLeft;
}
@keyframes arcu_bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.arcuAnimated.bounceOutRight {
animation-name: arcu_bounceOutRight;
}
@keyframes arcu_bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.arcuAnimated.bounceOutUp {
animation-name: arcu_bounceOutUp;
}
@keyframes arcu_fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.arcuAnimated.fadeIn {
animation-name: arcu_fadeIn;
}
@keyframes arcu_fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInDown {
animation-name: arcu_fadeInDown;
}
@keyframes arcu_fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInDownBig {
animation-name: arcu_fadeInDownBig;
}
@keyframes arcu_fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInLeft {
animation-name: arcu_fadeInLeft;
}
@keyframes arcu_fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInLeftBig {
animation-name: arcu_fadeInLeftBig;
}
@keyframes arcu_fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInRight {
animation-name: arcu_fadeInRight;
}
@keyframes arcu_fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInRightBig {
animation-name: arcu_fadeInRightBig;
}
@keyframes arcu_fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInUp {
animation-name: arcu_fadeInUp;
}
@keyframes arcu_fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.fadeInUpBig {
animation-name: arcu_fadeInUpBig;
}
@keyframes arcu_fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.arcuAnimated.fadeOut {
animation-name: arcu_fadeOut;
}
@keyframes arcu_fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.arcuAnimated.fadeOutDown {
animation-name: arcu_fadeOutDown;
}
@keyframes arcu_fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.arcuAnimated.fadeOutDownBig {
animation-name: arcu_fadeOutDownBig;
}
@keyframes arcu_fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.arcuAnimated.fadeOutLeft {
animation-name: arcu_fadeOutLeft;
}
@keyframes arcu_fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.arcuAnimated.fadeOutLeftBig {
animation-name: arcu_fadeOutLeftBig;
}
@keyframes arcu_fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.arcuAnimated.fadeOutRight {
animation-name: arcu_fadeOutRight;
}
@keyframes arcu_fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.arcuAnimated.fadeOutRightBig {
animation-name: arcu_fadeOutRightBig;
}
@keyframes arcu_fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.arcuAnimated.fadeOutUp {
animation-name: arcu_fadeOutUp;
}
@keyframes arcu_fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.arcuAnimated.fadeOutUpBig {
animation-name: arcu_fadeOutUpBig;
}
@keyframes arcu_flip {
from {
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) scale3d(.95, .95, .95);
animation-timing-function: ease-in;
}
to {
transform: perspective(400px);
animation-timing-function: ease-in;
}
}
.arcuAnimated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
animation-name: arcu_flip;
}
@keyframes arcu_flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.arcuAnimated.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: arcu_flipInX;
}
@keyframes arcu_flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.arcuAnimated.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: arcu_flipInY;
}
@keyframes arcu_flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.arcuAnimated.flipOutX {
animation-name: arcu_flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@keyframes arcu_flipOutY {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.arcuAnimated.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: arcu_flipOutY;
}
@keyframes arcu_lightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.arcuAnimated.lightSpeedIn {
animation-name: arcu_lightSpeedIn;
animation-timing-function: ease-out;
}
@keyframes arcu_lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.arcuAnimated.lightSpeedOut {
animation-name: arcu_lightSpeedOut;
animation-timing-function: ease-in;
}
@keyframes arcu_rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.arcuAnimated.rotateIn {
animation-name: arcu_rotateIn;
}
@keyframes arcu_rotateInDownLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.arcuAnimated.rotateInDownLeft {
animation-name: arcu_rotateInDownLeft;
}
@keyframes arcu_rotateInDownRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.arcuAnimated.rotateInDownRight {
animation-name: arcu_rotateInDownRight;
}
@keyframes arcu_rotateInUpLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.arcuAnimated.rotateInUpLeft {
animation-name: arcu_rotateInUpLeft;
}
@keyframes arcu_rotateInUpRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.arcuAnimated.rotateInUpRight {
animation-name: arcu_rotateInUpRight;
}
@keyframes arcu_rotateOut {
from {
transform-origin: center;
opacity: 1;
}
to {
transform-origin: center;
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.arcuAnimated.rotateOut {
animation-name: arcu_rotateOut;
}
@keyframes arcu_rotateOutDownLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.arcuAnimated.rotateOutDownLeft {
animation-name: arcu_rotateOutDownLeft;
}
@keyframes arcu_rotateOutDownRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.arcuAnimated.rotateOutDownRight {
animation-name: arcu_rotateOutDownRight;
}
@keyframes arcu_rotateOutUpLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.arcuAnimated.rotateOutUpLeft {
animation-name: arcu_rotateOutUpLeft;
}
@keyframes arcu_rotateOutUpRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.arcuAnimated.rotateOutUpRight {
animation-name: arcu_rotateOutUpRight;
}
@keyframes arcu_hinge {
0% {
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40%, 80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.arcuAnimated.hinge {
animation-name: arcu_hinge;
}
@keyframes arcu_jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.arcuAnimated.jackInTheBox {
animation-name: arcu_jackInTheBox;
} @keyframes arcu_rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: none;
}
}
.arcuAnimated.rollIn {
animation-name: arcu_rollIn;
} @keyframes arcu_rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.arcuAnimated.rollOut {
animation-name: arcu_rollOut;
}
@keyframes arcu_zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.arcuAnimated.zoomIn {
animation-name: arcu_zoomIn;
}
@keyframes arcu_zoomInDown {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomInDown {
animation-name: arcu_zoomInDown;
}
@keyframes arcu_zoomInLeft {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomInLeft {
animation-name: arcu_zoomInLeft;
}
@keyframes arcu_zoomInRight {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomInRight {
animation-name: arcu_zoomInRight;
}
@keyframes arcu_zoomInUp {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomInUp {
animation-name: arcu_zoomInUp;
}
@keyframes arcu_zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.arcuAnimated.zoomOut {
animation-name: arcu_zoomOut;
}
@keyframes arcu_zoomOutDown {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomOutDown {
animation-name: arcu_zoomOutDown;
}
@keyframes arcu_zoomOutLeft {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0);
transform-origin: left center;
}
}
.arcuAnimated.zoomOutLeft {
animation-name: arcu_zoomOutLeft;
}
@keyframes arcu_zoomOutRight {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0);
transform-origin: right center;
}
}
.arcuAnimated.zoomOutRight {
animation-name: arcu_zoomOutRight;
}
@keyframes arcu_zoomOutUp {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.arcuAnimated.zoomOutUp {
animation-name: arcu_zoomOutUp;
}
@keyframes arcu_slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.arcuAnimated.slideInDown {
animation-name: arcu_slideInDown;
}
@keyframes arcu_slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.arcuAnimated.slideInLeft {
animation-name: arcu_slideInLeft;
}
@keyframes arcu_slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.arcuAnimated.slideInRight {
animation-name: arcu_slideInRight;
}
@keyframes arcu_slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.arcuAnimated.slideInUp {
animation-name: arcu_slideInUp;
}
@keyframes arcu_slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.arcuAnimated.slideOutDown {
animation-name: arcu_slideOutDown;
}
@keyframes arcu_slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}
.arcuAnimated.slideOutLeft {
animation-name: arcu_slideOutLeft;
}
@keyframes arcu_slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.arcuAnimated.slideOutRight {
animation-name: arcu_slideOutRight;
}
@keyframes arcu_slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.arcuAnimated.slideOutUp {
animation-name: arcu_slideOutUp;
}