@import "/fonts/GothamPro/fullFontSet.css";

.autoProg2018 {
  font-family: "GothamPro";
  font-weight: normal;
  font-size: 16px;
  line-height: 1.4;
  color: #5f6a7d;
}
.container {
  width: 1250px; margin: 0 auto; padding: 0;
}
.container.flex { display: flex; flex-wrap: wrap; }
.container.flex_jc_sb { justify-content: space-between; }

#concernsVideos {
  overflow: hidden; display: flex; align-content: center; align-items: center;justify-content: center;
  background: #000000;
  height: 41.45vw; max-height: 796px;
  position: relative;
  text-align: center;
}
#concernsVideos {}

#concernsVideos video {
  width: 100%; max-width: 1920px;
  vertical-align: middle;
}
#concernsVideos video {
  width: 100vw;
  margin-top: -50vw;
  margin-bottom: -50vw;
}

.videoSwitch {
  display: flex; width: 786px; position: absolute; left: 50%; bottom: 28px; margin-left: -394px; justify-content: space-between;
}
.videoSwitch {
  flex-direction: column;
  height: 96%;
  bottom: 2%;
  left: 1%;
  margin-left: 0;
  width: auto;
}

.circle {
  position: relative;
  border-radius: 50px;
  width: 4.85vw;
  height: 4.85vw;
  max-width: 72px; max-height: 72px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #ffffff, #e2e2e2);
  box-shadow: 0 10px 15px 0 rgba(0,0,0,0.25);
}
.circle .circleContent {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.circle.n1 .circleContent img { margin-right: -2px; margin-top: 5px; }
.circle.n2 .circleContent img { margin-right: 0px; margin-top: 6px; }
.circle.n3 .circleContent img { margin-right: -2px; margin-top: 6px; }
.circle.n4 .circleContent img { margin-right: 0px; margin-top: 6px; }
.circle.n5 .circleContent img { margin-right: 0px; margin-top: 6px; }
.circle.n6 .circleContent img { margin-right: 0px; margin-top: 5px; }
.circle.n7 .circleContent img { margin-right: 0px; margin-top: 5px; }
.circle.n8 .circleContent img { margin-right: 0px; margin-top: 5px; }

.circle .activeBorder {
  width: 100%; height: 100%;
  border-radius: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.circle .activeBorder .left {
  overflow: hidden;
  width: 50%; height: 100%; position: absolute; left: 0%; top: 0%;
}
.circle .activeBorder .right {
  overflow: hidden;
  width: 50%; height: 100%;  position: absolute; left: 50%; top: 0%;
}
.circle .activeBorder .center {
  position: relative;
  padding: 10px;  z-index: 2;
  box-sizing: border-box; width: 100%; height: 100%;
}
.circle .activeBorder .indicator {
  box-sizing: border-box;
  border: 5px Solid #bb3737;
  width: 200%; height: 100%;
  border-radius: 999px;
}
.circle .activeBorder .left .indicatorHolder {
  transform: rotate(0deg);
  transform-origin: 0% 50%;
  width: 100%; height: 100%;
  position: absolute; left: 100%; top: 0;
  overflow: hidden;
}
.circle .activeBorder .right .indicatorHolder {
  transform: rotate(0deg);
  transform-origin: 100% 50%;
  width: 100%; height: 100%;
  position: absolute; right: 100%; top: 0;
  overflow: hidden;
}
.circle .activeBorder .left .indicatorHolder .indicator {
  position: absolute; right: 0px; top: 0px;
}
.circle .activeBorder .right .indicatorHolder .indicator {
  position: absolute; left: 0px; top: 0px;
}






.gloryonAutoClubBlock {
  margin-top: 58px;
  align-items: flex-start;
  margin-bottom: 13px;
}
.gloryonAutoClubBlock .autoProgLogo {
  width: 682px;
  text-align: center;
  box-sizing: border-box;
  padding-left: 61px;
  padding-top: 40px;
}
.gloryonAutoClubBlock .concerns {
  width: 487px; height: 221px; box-sizing: border-box; padding-top: 140px; text-align: center;
  background: url(/images/userdata/publicSite/autoProg2018/concerns.jpg) no-repeat top left;
  font-size: 30px;
  color: #2b2a29;
  padding-right: 16px;
}
.gloryonAutoClubBlock .concerns span {
  font-family: "GothamProMedium";
}
.separator {
  height: 3px; background: url(/images/userdata/publicSite/autoProg2018/lineSeparator.jpg) no-repeat center center;
}
.howGetAutoBlock {
  margin-bottom: 30px;
}
.howGetAutoBlock .container.n1 {
  text-align: right;
  background: url(/images/userdata/publicSite/autoProg2018/how.png) no-repeat  913px 0px;
  min-height: 103px;
  font-size: 25px;
  line-height: 1.18;
  margin-top: 29px;
  letter-spacing: -0.006em;
  padding-right: 365px;
  padding-top: 5px;
  box-sizing: border-box;
}
.howGetAutoBlock .container.n1 span {
  font-family: "GothamProLight";
}
.howGetAutoBlock .container.n2 {
  text-align: center;
  margin-top: 34px;
}
.howGetAutoBlock .container.n2 img {
  margin-right: 2px;
}
.howGetAutoBlock .container.n3 {
  margin-top: 12px; line-height: 1.2; justify-content: center;
}
.howGetAutoBlock .container.n3 > div {
  text-align: center; font-size: 17px; color: #5f6a7d;
  width: 250px;
}
.howGetAutoBlock .container.n3 > div span {
  font-family: "GothamProMedium";
}
.blockHeader {
  font-size: 35px; text-align: center; line-height: 1.2;
}
.blockHeader span {
  font-family: "GothamProMedium";
}
.autoMarksBlock {
  margin-top: 60px;
}
.marks {
  margin-top: 52px;
}
.mark {
  width: 25%; height: 212px; position: relative; z-index: 1;
  transition: all 0.2 linear 0s;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.mark .fade {
  background: rgba(255,255,255,0.9);
  opacity: 1;
  transition: all 0.2s linear 0s;
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
}
.mark .text {
  position: absolute; left: 0%; top: 0%; width: 100%; height: 100%;
  background: #bb3737;
  opacity: 0;
  transition: all 0.2s linear 0s;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  color: white; font-size: 13px;z-index: 1;
  line-height: 1.195;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.mark .text > div {
  border: 3px Solid rgba(255,255,255,0.5); width: 100%; height: 100%; box-sizing: border-box;
  padding: 10px;
}
.mark .text .markName {
  text-align: center;
  font-size: 20px;
  font-family: "GothamProLight";
  padding-top: 4px;
  margin-bottom: 8px;
}
.mark .sensor {
  position: absolute; left: 0px; top: 0px; z-index: 5; width: 100%; height: 100%;
}
.mark.hovered {
  z-index: 2;
  box-shadow: 0px 15px 35px 0px rgba(0,0,0,0.35);
}
.mark.hovered .fade {
  opacity: 0;
}
.mark.hovered .text {
  top: 100%; opacity: 1;
  box-shadow: 0px 15px 35px 0px rgba(0,0,0,0.35);
}
.mark.hovered .text.top { top: -100%; }

.mark.merz {
  background: url(/images/userdata/publicSite/autoProgram/car_01.jpg) no-repeat top center;
  background-size: cover;
}
.mark.merz .fade img {
  margin-top: 23px;
}
.mark.audi {
  background: url(/images/userdata/publicSite/autoProgram/car_02.jpg) no-repeat top center;
  background-size: cover;
}
.mark.audi .fade img {
  margin-top: 23px;
}
.mark.infi {
  background: url(/images/userdata/publicSite/autoProgram/car04.jpg) no-repeat top center;
  background-size: cover;
}
.mark.infi .fade img {
  margin-top: 22px;
  margin-right: 7px;
}
.mark.vw {
  background: url(/images/userdata/publicSite/autoProgram/car03.jpg) no-repeat top center;
  background-size: cover;
}
.mark.vw .fade img {
  margin-top: 23px;
  margin-right: 2px;
}
.mark.bmw {
  background: url(/images/userdata/publicSite/autoProgram/car01.jpg) no-repeat top center;
  background-size: cover;
}
.mark.bmw .fade img {
  margin-top: 23px;
}
.mark.lexus {
  background: url(/images/userdata/publicSite/autoProgram/car02.jpg) no-repeat top center;
  background-size: cover;
}
.mark.lexus .fade img {
  margin-top: 23px;
  margin-right: 2px;
}
.mark.toyota {
  background: url(/images/userdata/publicSite/autoProgram/car05.jpg) no-repeat top center;
  background-size: cover;
}
.mark.toyota .fade img {
  margin-top: 23px;
  margin-right: 2px;
}
.mark.nissan {
  background: url(/images/userdata/publicSite/autoProgram/car06.jpg) no-repeat top center;
  background-size: cover;
}
.mark.nissan .fade img {
  margin-top: 24px;
  margin-right: 2px;
}


/*  auto table  */
.autoTableBlock {
  margin-top: 61px;
}
.autoTable {
  width: 1250px;
  margin-top: 28px;
}
.autoTable .row {
  display: flex; flex-wrap: wrap;
  margin-top: -3px;
}
.autoTable .row:nth-child(1),
.autoTable .row:nth-child(2) {
  margin-top: 0px;
}
.autoTable .cell {
  padding: 3px;
  height: 93px;
  position: relative;
  font-size: 17px;
  box-sizing: border-box;
  /*background: #e2e2e2;*/
}
.autoTable .cell.autoMark {
  height: 55px;
  background: linear-gradient(to bottom, transparent 35%, #e2e2e2 100%);
  font-size: 15px; font-family: "GothamProMedium"; line-height: 1.2;
}
.autoTable .cell.autoMark.selected {
  position: relative; z-index: 1;
  background: linear-gradient(to bottom, transparent 35%, #bb3737 100%);
  color: #bb3737;
}
.autoTable .cell.rank {
  background: linear-gradient(to right, transparent 35%, #e2e2e2 100%);
}
.autoTable .cell.rank.selected {
  background: linear-gradient(to right, transparent 35%, #bb3737 100%);
  color: #bb3737;
  font-family: "GothamProMedium";
  position: relative; z-index: 1;
}
.autoTable .cell.car {
  border: 3px Solid transparent;
  padding: 0px;
}
.autoTable .cell.car > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; justify-content: center;
}
.autoTable .cell.car > div > img {
  width: 100%;
}
.autoTable .row .car:nth-child(1n+1) {
  border-right: 3px dotted #f1f1f1;
}
.autoTable .row:nth-child(1n+3) .car {
  border-top: 3px dotted #f1f1f1;
}
.autoTable .row:last-child .cell.car {
  border-bottom: 3px dotted #f1f1f1;
}

.autoTable .row .car.selected {
  position: relative;
  z-index: 1;
  border: none;
}
.autoTable .row .car.selected,
.autoTable .row:last-child .car.selected {
  border: 3px Solid #bb3737;
}
.autoTable .cell.empty {
  height: 55px;
  background: transparent;
}
.autoTable .cell > div {
  width: 100%;
  height: 100%;
  background: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.autoTable .cell.rank > div {
  justify-content: flex-end;
  padding-right: 28px;
  text-align: right;
  line-height: 1.2;
}
.autoTable .row .cell:nth-child(1) { width: 156px; }
.autoTable .row .cell:nth-child(2) { width: 141px; }
.autoTable .row .cell:nth-child(3) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(4) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(5) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(6) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(7) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(8) { width: 141px; margin-left: -3px; }
.autoTable .row .cell:nth-child(9) { width: 141px; margin-left: -3px; }

.carPopupWrap {
  display: none;
}
.carPopup {
  display: flex;
  background: white none repeat scroll 0% 0%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 25px 0px;
  width: 688px;
  height: 247px;
  padding: 20px;
  position: absolute;
  z-index: 2;
}
.carPopup .corner {
  position: absolute; top: 2px; left: 2px;
  background: url(/images/userdata/publicSite/autoProg2018/popupCorner.png) no-repeat top left; width: 20px; height: 20px;
}
.carPopup .corner.right {
  position: absolute; top: 2px; left: auto; right: 2px;
  background: url(/images/userdata/publicSite/autoProg2018/popupCornerR.png) no-repeat top right; width: 20px; height: 20px;
}

.carPopup .photo {
  box-sizing: border-box; padding-right: 20px;
  width: 55%; display: flex; align-items: center; justify-content: center;
}
.carPopup .photo img {
  width: 100%;
}
.carPopup .texts {
  width: 45%;
  background: radial-gradient(at left center, #eeeeee, #ffffff 50%);
  display: flex; justify-content: center; align-items: center;
  text-align: center; flex-direction: column;
}
.carPopup .texts .autoMark {
  font-family: "GothamProMedium";
}
.carPopup .texts .autoModel {
  margin-bottom: 15px;
  font-size: 22px; font-family: "GothamProMedium";
  color: #bb3737;
}
.carPopup .texts a {
  font-size: 13px;
}

/* /auto table  */

.gloryonAutoOwnersBlock {
  margin-top: 60px;
}
.gloryonAutoOwnersBlock .blockHeader span {
  color: #bb3737;
}
.ownerBlock {

}
.ownerBlock.stephanova {
  margin-top: 48px;
}
.ownerInfo {
  width: 321px; box-sizing: border-box; border: 3px Solid #f1f1f1;
  min-height: 490px;
  padding: 12px; /*24px впритык к фото*/
  margin-left: 32px;
  text-align: center;
}
.ownerInfo .photo {
  border: 10px Solid #ffffff;
  box-shadow: 0px 25px 35px 0px rgba(0,0,0,0.07);
  width:247px;
  height:247px;
  border-radius: 160px;
  box-sizing: content-box;
  margin-top: 5px;
  margin-right: 5px;
}
.ownerInfo .rank {
  color: #bb3737;
  font-size: 25px;
  font-family: "GothamProMedium";
  margin-top: 11px;
}
.ownerInfo .name {
  font-size: 25px;
  font-family: "GothamProMedium";
  margin-top: -3px;
}
.ownerInfo .car {
  font-size: 15px;
  margin-top: 5px;
}
.ownerInfo .words {
  font-style: italic;
  font-size: 15px;
  margin-top: 10px;
}
.eventMedia {
  margin-left: 7px;
  width: 886px;
  min-height: 475px;
  background: url(/images/userdata/publicSite/autoProg2018/eventMediaBg.jpg) no-repeat 0px 197px;
}
.eventMedia.layoutR {
  position: relative;
}
.eventMedia.layoutR .video { position: absolute; left: 13px;  top: 0px; }
.eventMedia.layoutR .pic2 { position: absolute;  left: 383px; top: 0px; }
.eventMedia.layoutR .pic3 { position: absolute;  left: 603px; top: 22px;  }
.eventMedia.layoutR .pic4 { position: absolute;  left: 93px;  top: 250px; }
.eventMedia.layoutR .pic5 { position: absolute;  left: 383px; top: 325px; }
.eventMedia.layoutR .pic6 { position: absolute;  left: 603px; top: 200px; }

.ownerBlock.sawosh { margin-top: 49px; }
.ownerBlock.sawosh .eventMedia {
  margin-left: 2px;
  background: url(/images/userdata/publicSite/autoProg2018/event2MediaBg.jpg) no-repeat 0px 197px;
}
.ownerBlock.sawosh .ownerInfo {
  margin-left: 7px;
}
.ownerBlock.sawosh .ownerInfo .photo {
  margin-right: 0px;
}

.eventMedia.layoutL {
  position: relative;
}
.eventMedia.layoutL .video { position: absolute; left: 513px;  top: 0px; }
.eventMedia.layoutL .pic2 { position: absolute;  left: 293px; top: 0px; }
.eventMedia.layoutL .pic3 { position: absolute;  left: 31px; top: 22px;  }
.eventMedia.layoutL .pic4 { position: absolute;  left: 513px;  top: 250px; }
.eventMedia.layoutL .pic5 { position: absolute;  left: 293px; top: 325px; }
.eventMedia.layoutL .pic6 { position: absolute;  left: 115px; top: 200px; }

.ownerBlock.titova { margin-top: 49px; }

.ownerBlock.fedorova { margin-top: 49px; }
.ownerBlock.fedorova .eventMedia {
  margin-left: 2px;
  background: url(/images/userdata/publicSite/autoProg2018/event2MediaBg.jpg) no-repeat 0px 197px;
}
.ownerBlock.fedorova .ownerInfo {
  margin-left: 7px;
}
.ownerBlock.fedorova .ownerInfo .photo {
  margin-right: 0px;
}


.autoClubMembersBlock {
  margin-top: 61px;
  margin-bottom: 67px;
}
.autoClubMembersBlock .blockHeader {
  margin-bottom: 26px;
}
.autoClubMembersBlock .members {
  justify-content: center;
}
.autoClubMembersBlock .member {
  text-align: center;
}
.autoClubMembersBlock .member.n1 {
  width: 30.7%;
}
.autoClubMembersBlock .member.n2 {
  width: 39%;
}
.autoClubMembersBlock .member.n3 {
  width: 30.3%;
}
.autoClubMembersBlock .photo {
  border: 10px Solid #ffffff;
  box-shadow: 0px 25px 35px 0px rgba(0,0,0,0.07);
  width:247px;
  height:247px;
  border-radius: 160px;
  box-sizing: content-box;
  margin-top: 5px;
  margin-right: 5px;
}
.autoClubMembersBlock .member .rank {
  color: #bb3737;
  font-size: 25px;
  font-family: "GothamProMedium";
  margin-top: 12px;
}
.autoClubMembersBlock .member .name {
  font-size: 25px;
  font-family: "GothamProMedium";
  margin-top: -5px;
}

.invitationBlock {
  margin-top: 25px;
}
.invitationBlock .blockHeader span { color: #bb3737; }


.separator.last {
  margin: 32px auto;
}