/* fonts */
@font-face {
    font-family: 'DINPROLIGHT';
    src: url('../fonts/DINPRO-LIGHT.eot');
    src: url('../fonts/DINPRO-LIGHT.eot') format('embedded-opentype'),
    url('../fonts/DINPRO-LIGHT.woff2') format('woff2'),
    url('../fonts/DINPRO-LIGHT.woff') format('woff'),
    url('../fonts/DINPRO-LIGHT.ttf') format('truetype'),
    url('../fonts/DINPRO-LIGHT.svg#DINPROLIGHT') format('svg'),
    url('../fonts/DINPRO-LIGHT.OTF');
}
@font-face {
    font-family: 'DINPROREGULAR';
    src: url('../fonts/DINPRO-REGULAR.eot');
    src: url('../fonts/DINPRO-REGULAR.eot') format('embedded-opentype'),
    url('../fonts/DINPRO-REGULAR.woff2') format('woff2'),
    url('../fonts/DINPRO-REGULAR.woff') format('woff'),
    url('../fonts/DINPRO-REGULAR.ttf') format('truetype'),
    url('../fonts/DINPRO-REGULAR.svg#DINPROREGULAR') format('svg'),
    url('../fonts/DINPRO-REGULAR.OTF');
}
@font-face {
    font-family: 'DINPROMEDIUM';
    src: url("../fonts/DINPRO-MEDIUM.eot");
    src: url("../fonts/DINPRO-MEDIUM.eot?#iefix") format('embedded-opentype'),
    url('../fonts/DINPRO-MEDIUM.woff') format('woff'),
    url('../fonts/DINPRO-MEDIUM.ttf') format('truetype'),
    url('../fonts/DINPRO-MEDIUM.svg#DINPROMEDIUM') format('svg'),
    url('../fonts/DINPRO-MEDIUM.OTF');
}
@font-face {
    font-family: 'Intro';
    src: url('../fonts/Intro.eot');
    src: url('../fonts/Intro.eot') format('embedded-opentype'),
    url('../fonts/Intro.woff2') format('woff2'),
    url('../fonts/Intro.woff') format('woff'),
    url('../fonts/Intro.ttf') format('truetype'),
    url('../fonts/Intro.svg#Intro') format('svg');
}

/* resets */
html,body,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
html {height: 100%}
body {min-height: 100%; min-width: 1230px; width: 100%; line-height:1; color: #666; background-color: #fff; font-size: 12px; position: relative; -webkit-backface-visibility: hidden}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {display: block}
table {border-collapse: collapse}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; color: #666; cursor: default}
a[href] {cursor: pointer}
a img {border: 0; text-decoration: none}
input:focus, textarea:focus {outline: none}
hr {margin-bottom: 15px; height: 0; border: 0; border-bottom: 1px dashed #666}

::-webkit-input-placeholder         {color: #dfe0e1}
::-moz-placeholder                  {color: #dfe0e1}
:-moz-placeholder                   {color: #dfe0e1}
:-ms-input-placeholder              {color: #dfe0e1}
.placeholder                        {color: #dfe0e1}

:focus::-webkit-input-placeholder   {color: transparent; transition: color 0.3s ease}
:focus::-moz-placeholder            {color: transparent; transition: color 0.3s ease}
:focus:-moz-placeholder             {color: transparent; transition: color 0.3s ease}
:focus:-ms-input-placeholder        {color: transparent; transition: color 0.3s ease}
:focus.placeholder                  {color: transparent; transition: color 0.3s ease}

.button,
.button *,
.animate2 {-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease}
.button .arrow,
.animate0 {-webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease}
.no_select {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none}

.scrollable {-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: opacity, left, right, top}
.scrollable.open, .scrollable:hover {will-change: auto}

.dinpro300, body, input, textarea,
.header_menu,
.header_logo_text small,
.header_consultation p,
.client_rounds .round,
.button {font-family: 'DINPROLIGHT', sans-serif; font-weight: 300}
.header_logo_text span,
.presentation_link,
.dinpro400 {font-family: 'DINPROREGULAR', sans-serif; font-weight: 400}
.dinpro500 {font-family: 'DINPROMEDIUM', sans-serif; font-weight: 500}
.intro,
.header_logo_text b,
.head h3,
.advantages h3,
.header_consultation h2,
.popup_content h2 {font-family: 'Intro', sans-serif; font-weight: 400; text-transform: uppercase}

.header_logo_image,
.footer_logo_image,
.button .arrow,
.header_consultation label:before,
.presentation_link:before,
.footer_menu a:before,
.popup_content label:before,
.popup_close,
.icon {background-image: url(../images/icons.png); background-repeat: no-repeat; display: inline-block; vertical-align: middle; position: relative}

.main_container {margin: 0 auto 220px; min-width: 1300px; width: 100%; position: relative; background-color: #fff; z-index: 2; overflow: hidden}
.mobile .main_container {margin-bottom: 0}
.wrap {margin: 0 auto; width: 1270px; position: relative}

.button {height: 42px; font-size: 18px; line-height: 42px; display: inline-block; color: #808285; border: 2px solid #9fa1a3; background-color: #fff; border-radius: 13px; text-transform: uppercase; cursor: pointer; position: relative}
.button span {height: 42px; line-height: 42px; padding: 0 8px; position: relative; display: block; cursor: pointer; -webkit-transition: color 0s; -moz-transition: color 0s; -o-transition: color 0s; transition: color 0s}
.button input, .button button {width: 100%; height: 42px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; color: transparent; border: 0; opacity: 0; cursor: pointer; z-index: 3}
.button .bgr {left: 49%; right: 49%; top: 49%; bottom: 49%; border-radius: 13px; position: absolute}
.button.purple {background-color: #db2563; border-color: #db2563; color: #fff; text-align: center}
.button.white {background-color: #fff; border-color: #a60036; color: #a60036; text-align: center}
.button .arrow {display: block; position: absolute; right: 10px; top: 7px}
.button .arrow + span {margin-right: 10px}
.button .arrow.h27 {width: 10px; height: 27px; background-position: -109px -63px}
.button .arrow.h33 {width: 12px; height: 33px; background-position: -109px -95px}
.button .arrow.h44 {width: 17px; height: 44px; background-position: -109px -133px}
.button.white .arrow.h33 {background-position: -143px -95px}

.header {margin-bottom: 90px; padding-top: 32px; height: 808px; box-sizing: border-box; background: url(../images/background1.jpg) no-repeat center}
.header .wrap {height: 776px}
.header .wrap.scrollable {top: -50px; opacity: 0; transition: .2s; position: relative}
.header .wrap.scrollable.open {top: 0; opacity: 1}
.header_logo_image {width: 109px; height: 63px; float: left}
.header_menu {margin-bottom: 165px; font-size: 36px; text-transform: uppercase; color: #fff; overflow: hidden}
.header_menu a {margin: 0 35px; color: #fff; text-decoration: none}
.header_menu a[href^=tel] {margin: 0; font-size: 42px}
.header_menu a[href^=tel] .button {position: relative; top: -7px; left: 10px}

.header_logo_text {margin-bottom: 110px; color: #fff; text-transform: uppercase; display: block}
.header_logo_text b {font-size: 85px; display: block}
.header_logo_text span {font-size: 103px; display: block; letter-spacing: 5.5px}
.header_logo_text small {font-size: 28px; display: block; line-height: 200%}

.header_get_brief {margin-left: 208px; width: 367px}
.header_get_brief input[type=text] {margin-bottom: 20px; width: 367px; height: 40px; line-height: 40px; box-sizing: border-box; background-color: #fff; border: 0; text-indent: 10px; font-size: 18px; display: block}
.header_get_brief .button {display: block}

.header_consultation {padding: 14px; width: 478px; height: 430px; background-color: rgba(99, 58, 99, .29); box-sizing: border-box; position: absolute; right: 0; bottom: -27px; border-radius: 25px; color: #fff; text-align: center}
.header_consultation:after {content: ''; display: block; border-style: solid; border-width: 60px 212px 0 212px; border-color: rgba(99, 58, 99, .29) transparent transparent transparent; left: 20px; right: 20px; bottom: -60px; position: absolute}
.header_consultation .wrap {padding: 23px 34px 0; width: 450px; height: 402px; box-sizing: border-box; background-color: #db2563; border-radius: 10px; position: relative}
.header_consultation .wrap:after {content: ''; display: block; border-style: solid; border-width: 60px 212px 0 212px; border-color: #db2563 transparent transparent transparent; left: 9px; right: 9px; bottom: -60px; position: absolute; z-index: 1}
.header_consultation h2 {margin-bottom: 28px; font-size: 36px; position: relative}
.header_consultation h2:before {content: ''; height: 1px; position: absolute; left: 0; right: 0; background-color: #fff; top: 18px}
.header_consultation h2 span {padding: 0 18px; background-color: #db2563; display: inline-block; position: relative}
.header_consultation p {margin-bottom: 35px; font-size: 21px}
.header_consultation input[type=text] {margin-bottom: 20px; width: 286px; height: 40px; line-height: 40px; box-sizing: border-box; background-color: #fff; border: 0; text-indent: 10px; font-size: 18px}
.header_consultation label {display: block;  position: relative}
.header_consultation label:before {width: 30px; height: 41px; content: ''; display: block; position: absolute; left: 7px; top: 0}
.header_consultation label.name:before {background-position: 0 -68px}
.header_consultation label.phone:before {background-position: -33px -68px}
.header_consultation .button {height: 55px; line-height: 55px}
.header_consultation .button span {padding: 0 25px; height: 55px; line-height: 55px}
.header_consultation .button input,
.header_consultation .button button {height: 55px}
.header_consultation .button .arrow {top: 11px; right: 13px}

.head {margin: 0 auto 40px; width: 1230px; position: relative; text-align: center}
.head .head_line {
    position: absolute; top: 18px; left: 49%; right: 49%; height: 2px; background-color: #808285; opacity: 0;
    -webkit-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    -moz-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    -o-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    transition: opacity 400ms ease, left 1s ease, right 1s ease;
    transition-delay: 200ms}
.head h3 {padding: 0 20px; font-size: 36px; display: inline-block; background-color: #fff; position: relative; color: transparent;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -o-transition: color 500ms ease; transition: color 500ms ease}
.head.open .head_line {left: 0; right: 0; opacity: 1}
.head.open h3 {color: #808285}

.clients {margin: 0 auto 65px; width: 1230px; text-align: center}
.clients .client {width: 24%; height: 150px; display: inline-block; overflow: hidden; position: relative; left: -50px; opacity: 0}
.clients .client.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.clients .client.open img {
    margin: 0 auto; width: 185px; height: 105px; display: block;
    filter: url(grayscale.svg#greyscale); filter: gray;
    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); filter: grayscale(100%);
    -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s
}

.client_rounds {margin-bottom: 50px; text-align: center}
.client_rounds .round {margin: 30px; font-size: 21px; width: 360px; display: inline-block; vertical-align: top; line-height: 120%; position: relative; left: -50px; opacity: 0}
.client_rounds .round.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.client_rounds .round .image {margin: 0 auto 20px; background-image: url(../images/rounds.png); width: 245px; height: 214px}
.client_rounds .round .image.round1 {background-position: 0 0}
.client_rounds .round .image.round2 {background-position: -245px 0}
.client_rounds .round .image.round3 {background-position: -490px 0}
.client_rounds .round .image.round4 {background-position: -735px 0}
.client_rounds .round .image.round5 {background-position: 0 -214px}
.client_rounds .round .image.round6 {background-position: -245px -214px}
.client_rounds .round .image.round7 {background-position: -490px -214px}
.client_rounds .round .image.round8 {background-position: -735px -214px}

.advantages {height: 657px; background-image: url(../images/background2.jpg); color: #fff}
.advantages h3 {padding: 50px 0; font-size: 36px; color: transparent;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -o-transition: color 500ms ease; transition: color 500ms ease}
.advantages h3.open {color: #fff}

.presentation {margin-bottom: 60px; height: 321px; background-image: url(../images/background3.jpg); color: #fff; text-align: center}
.presentation_link {margin: 60px 80px 0 140px; color: #fff; text-transform: uppercase; text-decoration: underline; font-size: 19px; position: relative; display: inline-block; left: -50px; opacity: 0}
.presentation_link.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.presentation_link:before {width: 43px; height: 49px; content: ''; display: block; position: absolute; background-position: -114px 0; left: -60px; top: -14px}

.contact {margin-bottom: 45px; text-align: center}
.contact p {margin: 50px 0; font-size: 21px; opacity: 0; position: relative; left: -50px}
.contact .form {margin: 0 auto 45px; padding: 47px 57px; width: 1150px; border: 1px solid #999b9d; box-shadow: inset 0 0 0 1px #dfe0e1, 0 0 0 1px #ececed; background-color: #fff; border-radius: 17px; position: relative; opacity: 0; left: -50px}
.contact .form h3 {padding: 3px; font-size: 18px; font-weight: 400; background-color: #fff; text-transform: uppercase; position: absolute; top: -14px; left: 50px}
.contact .form label {margin: 0 30px 30px 0}
.contact .form input[type="text"],
.contact .form input[type="email"] {padding: 0 10px; width: 300px; font-size: 18px; line-height: 32px; height: 32px; background-color: transparent; border: 0; border-bottom: 2px solid #c0c1c2}
.contact .form textarea {margin-top: 50px; width: 1125px; min-height: 100px; font-size: 18px; background-color: transparent; border: 0; resize: vertical; overflow: auto}
.contact .form .icon {width: 29px; height: 34px}
.contact .form .icon.user {background-position: 0 -114px}
.contact .form .icon.mail {background-position: -29px -114px}
.contact .form .icon.phone {background-position: -60px -114px}
.contact .button {height: 78px; line-height: 78px; font-size: 31px; border-radius: 20px; position: relative; top: 50px; opacity: 0}
.contact .button span {padding: 0 40px 0 25px; height: 78px; line-height: 78px; border-radius: 20px}
.contact .button input,
.contact .button button {height: 78px}
.contact .button .arrow {top: 19px; right: 20px}
.contact .form.open,
.contact p.open {left: 0; opacity: 1; -webkit-transition: left .3s ease, opacity .6s ease; -moz-transition: left .3s ease, opacity .6s ease; -o-transition: left .3s ease, opacity .6s ease; transition: left .3s ease, opacity .6s ease}
.contact .button.open {top: 0; opacity: 1; -webkit-transition: top .3s ease, opacity .6s ease; -moz-transition: top .3s ease, opacity .6s ease; -o-transition: top .3s ease, opacity .6s ease; transition: top .3s ease, opacity .6s ease}

.footer {position: fixed; height: 230px; left: 0; right: 0; bottom: 0; padding-top: 80px; background-image: url(../images/background4.jpg); box-sizing: border-box}
.mobile footer {position: relative}
.footer p {font-size: 18px; color: #d9d9d9; text-align: center}
.footer_logo_image {width: 109px; height: 63px; float: left}
.footer_menu {margin-bottom: 30px; font-size: 36px; color: #fff; overflow: hidden}
.footer_menu a {margin-left: 190px; color: #fff; text-decoration: underline; position: relative}
.footer_menu a:before {content: ''; width: 29px; height: 34px; display: block; position: absolute; left: -42px; top: 14px; background-position: 0 -148px}
.footer_menu a[href^=tel]:before {width: 22px; left: -35px; top: 7px; background-position: -65px -68px}
.footer_menu a[href^=tel] {margin: 0 10px; font-size: 42px; text-decoration: none; float: right}
.footer_menu a[href^=tel] .button {position: relative; top: -7px; left: 10px; border-color: #fff}

.popup {position: fixed; z-index: 10000; left: 0; top: 0; right: 0; bottom: 0}
.popup_overlay {background-color: rgba(116,101,128,.76); position: fixed; z-index: 10000; left: 0; top: 0; right: 0; bottom: 0}
.popup_close {width: 29px; height: 29px; background-position: -34px -153px; position: absolute; right: 18px; top: 18px; cursor: pointer; opacity: .8}
.popup_close:hover {opacity: 1}
.popup_content {margin: -210px auto 0; padding: 75px; width: 1031px; background-color: #db2563; position: fixed; z-index: 10001; left: 0; top: 50%; right: 0; text-align: center; color: #fff; box-sizing: border-box}
.popup_content h2 {margin-bottom: 10px; font-size: 36px; position: relative}
.popup_content h2:before {content: ''; height: 1px; position: absolute; left: 0; right: 0; background-color: #fff; top: 18px}
.popup_content h2 span {padding: 0 18px; background-color: #db2563; display: inline-block; position: relative}
.popup_content p {margin-bottom: 40px; font-size: 21px}
.popup_content input[type=text] {margin-bottom: 20px; width: 286px; height: 40px; line-height: 40px; box-sizing: border-box; background-color: #fff; border: 0; text-indent: 10px; font-size: 18px}
.popup_content label {display: inline-block;  position: relative}
.popup_content label:before {width: 30px; height: 41px; content: ''; display: block; position: absolute; left: -40px; top: 0}
.popup_content label.name {margin-right: 100px}
.popup_content label.name:before {background-position: 0 -68px}
.popup_content label.phone:before {background-position: -33px -68px}
.popup_content .button {margin-top: 10px; height: 78px; line-height: 78px; font-size: 31px; border-radius: 20px; position: relative}
.popup_content .button span {padding: 0 40px 0 25px; height: 78px; line-height: 78px; border-radius: 20px}
.popup_content .button input,
.popup_content .button button {height: 78px}
.popup_content .button .arrow.h44 {top: 18px; right: 20px; background-position: -153px -133px}

.popup {opacity: 0; pointer-events: none; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s}
.popup.open {opacity: 1; pointer-events: inherit}
.popup_content {-webkit-transition: transform .3s; -moz-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px)}
.popup.open .popup_content {-webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0)}

#recall_popup_top,
#recall_popup_bottom {cursor: pointer}

/* Global */
.jBox-wrapper{text-align:left;  box-sizing:border-box}
.jBox-title, .jBox-content, .jBox-container{position:relative;  word-break:break-word;  box-sizing:border-box}
.jBox-container{background:#fff}
.jBox-content{padding:8px 10px;  overflow-x:hidden;  overflow-y:auto;  transition:opacity .2s; font-size: 25px;}
/* jBox Tooltip */
.jBox-Tooltip .jBox-container, .jBox-Mouse .jBox-container{border-radius:3px;  box-shadow:0 0 3px rgba(0,0,0,.25)}
.jBox-Tooltip .jBox-title, .jBox-Mouse .jBox-title{padding:8px 10px 0;  font-weight:bold}
.jBox-hasTitle.jBox-Tooltip .jBox-content, .jBox-hasTitle.jBox-Mouse .jBox-content{padding-top:5px}
.jBox-Mouse{pointer-events:none}
/* Pointer */
.jBox-pointer{position:absolute;  overflow:hidden}
.jBox-pointer-top{top:0; }
.jBox-pointer-bottom{bottom:0; }
.jBox-pointer-left{left:0; }
.jBox-pointer-right{right:0; }
.jBox-pointer-top, .jBox-pointer-bottom{width:30px;  height:12px}
.jBox-pointer-left, .jBox-pointer-right{width:12px;  height:30px}
.jBox-pointer:after{content:'';  width:20px;  height:20px;  position:absolute;  background:#fff;  transform:rotate(45deg)}
.jBox-pointer-top:after{left:5px;  top:6px;  box-shadow:-1px -1px 2px rgba(0,0,0,.15)}
.jBox-pointer-right:after{top:5px;  right:6px;  box-shadow:1px -1px 2px rgba(0,0,0,.15)}
.jBox-pointer-bottom:after{left:5px;  bottom:6px;  box-shadow:1px 1px 2px rgba(0,0,0,.15)}
.jBox-pointer-left:after{top:5px;  left:6px;  box-shadow:-1px 1px 2px rgba(0,0,0,.15)}
/* jBox Modal */
.jBox-Modal .jBox-container{border-radius:4px}
.jBox-Modal .jBox-content{padding:15px 20px}
.jBox-Modal .jBox-title{border-radius:4px 4px 0 0;  padding:15px 20px;  background:#fafafa;  border-bottom:1px solid #eee}
.jBox-Modal .jBox-footer{border-radius:0 0 4px 4px}
.jBox-Modal.jBox-closeButton-title .jBox-title{padding-right:55px}
.jBox-Modal .jBox-container, .jBox-Modal.jBox-closeButton-box:before{box-shadow:0 3px 15px rgba(0,0,0,.4),0 0 5px rgba(0,0,0,.4)}
/* Close button */
.jBox-closeButton{cursor:pointer;  position:absolute}
.jBox-closeButton svg{position:absolute;  top:50%;  right:50%}
.jBox-closeButton path{transition:fill .2s}
.jBox-closeButton path{fill:#aaa}
.jBox-closeButton:hover path{fill:#888}
.jBox-closeButton:active path{fill:#666}
/* Close button in overlay */
.jBox-overlay .jBox-closeButton{top:0;  right:0;  width:40px;  height:40px}
.jBox-overlay .jBox-closeButton svg{width:20px;  height:20px;  margin-top:-10px;  margin-right:-10px}
.jBox-overlay .jBox-closeButton path, .jBox-overlay .jBox-closeButton:active path{fill:#ddd}
.jBox-overlay .jBox-closeButton:hover path{fill:#fff}
/* Close button in title */
.jBox-closeButton-title .jBox-closeButton{top:0;  right:0;  bottom:0;  width:40px}
.jBox-closeButton-title .jBox-closeButton svg{width:12px;  height:12px;  margin-top:-6px;  margin-right:-6px}
/* Close button in box */
.jBox-closeButton-box .jBox-closeButton{top:-8px;  right:-10px;  width:24px;  height:24px;  background:#fff;  border-radius:50%}
.jBox-closeButton-box .jBox-closeButton svg{width:10px;  height:10px;  margin-top:-5px;  margin-right:-5px}
.jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton{background:#fafafa}
.jBox-closeButton-box:before{content:'';  position:absolute;  top:-8px;  right:-10px;  width:24px;  height:24px;  border-radius:50%;  box-shadow:0 0 5px rgba(0,0,0,.3)}
.jBox-pointerPosition-top.jBox-closeButton-box:before{top:5px}
.jBox-pointerPosition-right.jBox-closeButton-box:before{right:2px}
/* Overlay */
.jBox-overlay{position:fixed;  top:0;  left:0;  width:100%;  height:100%;  background-color:rgba(0,0,0,.82)}
/* Footer */
.jBox-footer{background:#fafafa;  border-top:1px solid #eee;  padding:8px 10px;  border-radius:0 0 3px 3px}
/* Block scrolling */
body[class^="jBox-blockScroll-"], body[class*=" jBox-blockScroll-"]{overflow:hidden}
/* Draggable */
.jBox-draggable{cursor:move}
/* Spinner */
@keyframes jBoxLoading{to{transform:rotate(360deg); }
}
.jBox-loading .jBox-content{opacity:.2}
.jBox-loading-spinner .jBox-content{min-height:38px !important;  min-width:38px !important;  opacity:0}
.jBox-spinner{box-sizing:border-box;  position:absolute;  top:50%;  left:50%;  width:24px;  height:24px;  margin-top:-12px;  margin-left:-12px}
.jBox-spinner:before{display:block;  box-sizing:border-box;  content:'';  width:24px;  height:24px;  border-radius:50%;  border:2px solid rgba(0,0,0,.2);  border-top-color:rgba(0,0,0,.8);  animation:jBoxLoading .6s linear infinite}
/* Animations */
[class^="jBox-animated-"], [class*=" jBox-animated-"]{animation-fill-mode:both}
@keyframes jBox-tada{0%{transform:scale(1)}
    10%,20%{transform:scale(0.8) rotate(-4deg)}
    30%,50%,70%,90%{transform:scale(1.2) rotate(4deg)}
    40%,60%,80%{transform:scale(1.2) rotate(-4deg)}
    100%{transform:scale(1) rotate(0)}
}
.jBox-animated-tada{animation:jBox-tada 1s}
@keyframes jBox-tadaSmall{0%{transform:scale(1)}
    10%,20%{transform:scale(0.9) rotate(-2deg)}
    30%,50%,70%,90%{transform:scale(1.1) rotate(2deg)}
    40%,60%,80%{transform:scale(1.1) rotate(-2deg)}
    100%{transform:scale(1) rotate(0)}
}
.jBox-animated-tadaSmall{animation:jBox-tadaSmall 1s}
@keyframes jBox-flash{0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
.jBox-animated-flash{animation:jBox-flash .5s}
@keyframes jBox-shake{0%,100%{transform:translateX(0)}
    20%,60%{transform:translateX(-6px)}
    40%,80%{transform:translateX(6px)}
}
.jBox-animated-shake{animation:jBox-shake .4s}
@keyframes jBox-pulseUp{0%{transform:scale(1)}
    50%{transform:scale(1.15)}
    100%{transform:scale(1)}
}
.jBox-animated-pulseUp{animation:jBox-pulseUp .25s}
@keyframes jBox-pulseDown{0%{transform:scale(1)}
    50%{transform:scale(0.85)}
    100%{transform:scale(1)}
}
.jBox-animated-pulseDown{animation:jBox-pulseDown .25s}
@keyframes jBox-popIn{0%{transform:scale(0)}
    50%{transform:scale(1.1)}
    100%{transform:scale(1)}
}
.jBox-animated-popIn{animation:jBox-popIn .25s}
@keyframes jBox-popOut{0%{transform:scale(1)}
    50%{transform:scale(1.1)}
    100%{transform:scale(0)}
}
.jBox-animated-popOut{animation:jBox-popOut .25s}
@keyframes jBox-fadeIn{0%{opacity:0}
    100%{opacity:1}
}
.jBox-animated-fadeIn{animation:jBox-fadeIn .2s}
@keyframes jBox-fadeOut{0%{opacity:1}
    100%{opacity:0}
}
.jBox-animated-fadeOut{animation:jBox-fadeOut .2s}
@keyframes jBox-slideUp{0%{transform:translateY(0)}
    100%{transform:translateY(-300px); opacity:0}
}
.jBox-animated-slideUp{animation:jBox-slideUp .4s}
@keyframes jBox-slideRight{0%{transform:translateX(0)}
    100%{transform:translateX(300px); opacity:0}
}
.jBox-animated-slideRight{animation:jBox-slideRight .4s}
@keyframes jBox-slideDown{0%{transform:translateY(0)}
    100%{transform:translateY(300px); opacity:0}
}
.jBox-animated-slideDown{animation:jBox-slideDown .4s}
@keyframes jBox-slideLeft{0%{transform:translateX(0)}
    100%{transform:translateX(-300px); opacity:0}
}
.jBox-animated-slideLeft{animation:jBox-slideLeft .4s}

.jBox-Notice{transition:margin .2s}
.jBox-Notice .jBox-container{border-radius:3px;  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.25),inset -1px -1px 0 0 rgba(0,0,0,.1)}
.jBox-Notice .jBox-content{border-radius:3px;  padding:12px 20px}
.jBox-Notice .jBox-title{padding:12px 20px 0;  font-weight:bold}
.jBox-hasTitle.jBox-Notice .jBox-content{padding-top:5px}
.jBox-Notice-black .jBox-container{color:#fff;  background:#000}
.jBox-Notice-gray .jBox-container{color:#333;  background:#f6f6f6}
.jBox-Notice-red .jBox-container{color:#fff;  background:#d00}
.jBox-Notice-green .jBox-container{color:#fff;  background:#db2563}
.jBox-Notice-blue .jBox-container{color:#fff;  background:#07d}
.jBox-Notice-yellow .jBox-container{color:#000;  background:#fd0}
@media (max-width:768px){.jBox-Notice .jBox-content{padding:10px 15px}
    .jBox-Notice .jBox-title{padding:10px 15px 0}
}
@media (max-width:500px){.jBox-Notice .jBox-content{padding:8px 10px}
    .jBox-Notice .jBox-title{padding:8px 10px 0}
    .jBox-hasTitle.jBox-Notice .jBox-content{padding-top:0}
}

/* jBox theme:NoticeFancy */
.jBox-NoticeFancy .jBox-container{border-radius:5px}
.jBox-NoticeFancy .jBox-content,.jBox-NoticeFancy .jBox-title{padding-left:25px}
.jBox-NoticeFancy.jBox-Notice-color .jBox-container{color:#fff;background:#222;text-shadow:0 -1px 0 #000}
/* Colored borders */
.jBox-NoticeFancy.jBox-Notice-color .jBox-container:after{content:'';position:absolute;top:0;left:0;bottom:0;width:8px;border-radius:4px 0 0 4px;background-image:linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);background-size:14px 14px}
.jBox-NoticeFancy.jBox-Notice-black .jBox-container:after,.jBox-NoticeFancy.jBox-Notice-gray .jBox-container:after{background-color:#888}
.jBox-NoticeFancy.jBox-Notice-red .jBox-container:after{background-color:#e00}
.jBox-NoticeFancy.jBox-Notice-green .jBox-container:after{background-color:#6c0}
.jBox-NoticeFancy.jBox-Notice-blue .jBox-container:after{background-color:#07d}
.jBox-NoticeFancy.jBox-Notice-yellow .jBox-container:after{background-color:#fb0}