.atc-contacts {
}
.atc-contacts__sidebar {
box-sizing: padding-box;
background-color: #fff;
width: 400px;
}
.contacts-sidebar__title {
font-size: 38px;
padding: 52px 0 20px 2px;
width: 398px;
}
.contacts-sidebar__desc {
line-height: 26px;
padding: 0 45px 0 0;
}
.atc-contacts > .layout__box {
display: flex;
}
.atc-contacts__map-box {
}
.contacts-sidebar__form {
margin: 50px 0 20px;
}
.mCSB_scrollTools .mCSB_draggerRail {
background-color: #00093b;
width: 1px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #00093b !important;
width: 3px;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
width: 5px;
}
.mCSB_inside > .mCSB_container {
margin-right: 21px;
}
.mCSB_scrollTools {
width: 21px;
}
.city-input__label {
background: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/city.svg) no-repeat center center / 20px;
border: 1px solid #232b47;
border-right-color: rgb(35, 43, 71);
border-right-style: solid;
border-right-width: 1px;
border-right: 0;
display: inline-block;
height: 41px;
width: 37px;
}
.city-input__input {
margin: 0 !important;
font-size: 13px;
height: 13px;
width: calc(67% - 60px);
}
.city-input__label:hover {
background-color: rgba(29, 41, 85, 0.05);
}
.contacts-form__country {
background-color: #f6f6f6;
cursor: default;
padding: 8px;
}
.atc-line-city__head {
align-items: center;
border-top: 2px solid #f6f6f6;
cursor: pointer;
display: flex;
padding: 15px 0 15px 7px;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.atc-line-city__head:hover {
background-color: #fcfcfc;
}
.contacts-form__country + .contacts-form__item .atc-line-city__head {
border-top: none;
}
.contacts-form__item, .atc-line-city__head {
transition: all 0.4s ease 0s;
}
.atc-line-city__icons {
display: flex;
height: 26px;
justify-content: flex-end; }
.blue-sq {
background: #284594 no-repeat center / 71%;
border-radius: 5px;
display: inline-block;
box-sizing: border-box;
height: 0;
margin-left: 4px;
padding: 13px;
vertical-align: top;
width: 0;
}
.atc-line-city__body {
border-left: 2px solid #f6f6f6;
font-size: 13px;
padding: 0 0 0 12px;
}
.atc-line-city__extra-title {
color: #00093b99;
font-size: 13px;
}
.atc-line-city__text-line {
margin-bottom: 10px;
}
.atc-line-city__maps-icons {
bottom: -2px;
position: relative;
display: inline-block;
}
.atc-line-city__map {
background: transparent no-repeat center / contain;
display: inline-block;
height: 21px;
margin-right: 8px;
position: relative;
width: 21px;
}
.atc-line-city__map--google {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/gugl_karty.png);
bottom: -2px;
height: 24px;
width: 24px;
}
.atc-line-city__map--yandex {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/yandex_karty.png);
bottom: -1px;
height: 21px;
margin-right: 4px;
}
.atc-line-city__map--baidu {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/baidu-maps.png);
}
.atc-line-city__maps {
margin-top: -13px;
position: relative;
}
.atc-line-city__body {
display: none;
}
.atc-line-city--open .atc-line-city__body { }
.atc-line-city--open .atc-line-city__head {
padding-top: 18px;
}
.atc-line-city--open .atc-line-city__head:hover {
background-color: transparent;
}
.atc-line-city--open .atc-line-city__title {
font-weight: 600;
}
.atc-line-city--open .atc-line-city__icons { }
.atc-line-city--hover .atc-line-city__head {
background-color: #f7f7f7;
}
.atc-line-city--select .atc-line-city__head {
background-color: #f7f7f7;
}
.contacts-form__country-icon {
background: transparent no-repeat center bottom / contain;
display: inline-block;
height: 13px;
margin-right: 8px;
position: relative;
width: 16px;
}
.contacts-form__country--germany .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/germany.svg);
}
.contacts-form__country--hong-kong .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/hong-kong-2.svg);
}
.contacts-form__country--china .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/china-flag.png);
}
.contacts-form__country--russia .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/russia-2.svg);
}
.contacts-form__country--thailand .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/thailand.png);
}
.contacts-form__country--taiwan .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/tayvan_flag.png);
}
.contacts-form__country--south-korea .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/South_Korea.png);
}
.contacts-form__country--japan .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/jp.png);
}
.contacts-form__country--japan .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/jp.png);
}
.contacts-form__country--vietnam .contacts-form__country-icon {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/countries/vietnam.png);
}
.atc-contacts__map-box {
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.atc-contacts__height-block {
height: calc(100vh - 76px);
min-height: 500px;
}
.admin-bar .atc-contacts__height-block {
height: calc(100vh - 108px);
}
.slide-map {
height: 822px;
left: -10%;
overflow: hidden;
position: relative;
top: -30%;
width: 120%;
}
.map-container {
bottom: 0;
height: 723px;
position: absolute;
right: 2%;
width: 1000px;
z-index: 8;
}
.slide-map__gradient {
background: #d8e8ff;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
.slide-map__grid {
background: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/grid-white.png);
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 4;
}
.map-container__svg-map {
background: rgba(0, 0, 0, 0) url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/map.svg) no-repeat scroll center / contain;
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.lines {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
.lines__img {
background: rgba(0, 0, 0, 0) url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/line-dots.png) no-repeat scroll center center / cover ;
height: 100%;
margin: 0 auto !important;
width: 100%;
}
.slide-map__text {
left: 3.5%;
position: absolute;
top: 148px;
width: 440px;
z-index: 6;
}
.slide-map__img {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/compass.png);
display: inline-block;
height: 125px;
left: 23px;
position: absolute;
top: -102px;
width: 125px;
}
.slide-map__title {
font-size: 55px;
letter-spacing: -0.02em;
line-height: 56px;
font-weight: bold;
text-transform: uppercase;
}
.slide-map__p {
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 24px;
margin: 12px 0 14px;
text-transform: uppercase;
}
.slide-map__contact {
display: inline-block;
font-size: 30px;
letter-spacing: 0.02em;
position: relative;
}
.slide-map__first-tel {
border-bottom: 3px dotted #000000;
margin-bottom: 0.4em;
padding-bottom: 0.4em;
}
.slide-map__second-tel {
}
.slide-map__circle {
background-color: #7d3daf;
border-radius: 40px;
display: inline-block;
height: 40px;
margin: 16px 3px 0 0;
overflow: hidden;
padding: 3px;
width: 40px;
}
.slide-map__circle--pur {
background-color: #7D3DAF;
}
.slide-map__circle--green {
background-color: #1BD741;
}
.slide-map__circle > div {
display: inline-block;
height: 100%;
width: 100%;
}
.slide-map__viber {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/viber.svg);
}
.slide-map__whatsapp {
background-image: url(//qtavia.com/wp-content/plugins/atc-contacts/html/img/whatsapp.svg);
}
.markers {
height: 100%;
position: absolute;
width: 100%;
z-index: 10;
}
.marker {
cursor: pointer;
height: 0;
position: absolute;
width: 0;
}
.marker__plashka {
display: block;
left: -19px;
position: absolute;
text-decoration: none !important;
top: -31px;
z-index: 3;
}
.marker--r .marker__plashka {
left: initial;
right: -19px;
}
.marker--t .marker__plashka {
top: 8px;
}
.marker__triangle {
bottom: -8px;
height: 8px;
position: absolute;
width: 100%;
}
.marker::before {
animation: point-anim 1.5s infinite;
-moz-animation: point-anim 1.5s infinite;
-webkit-animation: point-anim 1.5s infinite;
-o-animation: point-anim 1.5s infinite;
background: white none repeat scroll 0 0;
border-radius: 15px;
bottom: -6px;
content: "";
height: 14px;
position: absolute;
width: 14px;
z-index: 1;
}
.marker--l::before {
left: -7px;
}
.marker--r::before {
right: -7px;
}
.marker--t::before {
bottom: initial;
top: -7px;
}
.marker--dot .marker__plashka::before {
background-color: white;
border-radius: 15px;
bottom: -12px;
content: "";
height: 6px;
left: 15px;
position: absolute;
width: 6px;
z-index: 0;
}
.marker--r .marker__plashka::before {
left: 0;
right: 15px;
}
.marker--t .marker__plashka::before {
bottom: 0;
top: -11px;
}
@keyframes point-anim{
0% 		{transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5);  opacity: 1; }
100% 	{transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5);  opacity: 0; }
}
@-webkit-keyframes point-anim{
0% 		{-webkit-transform: scale(0.5); opacity: 1; }
100% 	{-webkit-transform: scale(1.5);	opacity: 0; }
}
.marker__triangle::after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #2f9be0;
content: "";
height: 0;
position: inherit;
top: 21px;
width: 0;
}
.marker--l .marker__triangle::after {
left: 14px;
}
.marker--t .marker__triangle::after {
top: -1px;
}
.marker--r .marker__triangle::after {
right: 14px;
}
.marker--r .marker__title {
right: 0;
}
.marker--t .marker__triangle {
bottom: 0;
top: -8px;
}
.marker--t .marker__triangle::after {
border-bottom: 10px solid #2f9be0;
border-top: 0;
}
.marker__title {
background-color: #2f9be0;
border-radius: 3px;
color: #ffffff;
display: inline-block;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.05em;
padding: 1px 12px 2px;
position: absolute;
text-transform: uppercase;
white-space: nowrap;
}
.marker:hover .marker__triangle::after  {
border-top-color: #39415d;
}
.marker--t:hover .marker__triangle::after {
border-bottom-color: #39415d;
}
.marker:hover .marker__title {
background-color: #39415d;
}
.marker--0 {
bottom: 46.04%;
right: 88.02%;
}
.marker--1 {
left: 9.32%;
top: 56.04%;
z-index: 16;
}
.marker--2 {
bottom: 52.73%;
right: 81.78%;
}
.marker--3 {
bottom: 62.45%;
left: 23.01%;
z-index: 8;
}
.marker--4 {
bottom: 52.6%;
left: 23.55%;
z-index: 10;
}
.marker--5 {
bottom: 66.8%;
left: 23.51%;
}
.marker--6 {
bottom: 55.7%;
left: 55.9%;
}
.marker--7 {
bottom: 46.4%;
left: 80.91%;
z-index: 11;
}
@media screen and (max-width: 1398px) {
.marker--7 {
left: 71.41%;
}
.marker--7::before {
right: 12px;
}
}
.marker--8 {
bottom: 37.5%;
left: 70.93%;
z-index: 12;
}
.marker--9 {
bottom: 27.5%;
right: 21.1%;
}
.marker--10 {
bottom: 18.8%;
left: 71.4%;
z-index: 14;
}
.marker--11 {
left: 72.1%;
top: 84.2%;
z-index: 15;
}
@media screen and (max-width: 1212px) {
.map-container {
height: 578px;
width: 800px;
}
}
@media screen and (max-width: 1060px) {
.map-container {
height: 434px;
width: 600px;
}
}
@media screen and (max-width: 900px) {
.atc-contacts__map-box {
display: none;
}
.atc-contacts__sidebar {
height: auto !important;
max-height: initial;
width: 100%;
}
.contacts-form__body {
height: 84vh;
}
}
@media screen and (max-width: 400px) {
.atc-line-city__head {
display: block;
}
.atc-line-city__icons {
display: flex;
height: auto;
justify-content: left;
margin: 9px 0 0;
opacity: 1 !important;
}
.atc-line-city__body .atc-line-city__b-icons {
display: none;
}
}