body {
  font-family: 'Open Sans Hebrew', sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  direction: rtl; }

#main {
  width: 1250px;
  margin: auto; }

#rightPart {
  width: 250px;
  height: 100vh;
  float: right;
  background-color: #C0D8FF;
  text-align: center;
  position: relative; }
  #rightPart .instructions {
    font-weight: bold;
    background-color: #ffcc22;
    color: #2266ff;
    padding: 15%;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: right;
    font-size: 17px; }
  #rightPart .characteristic {
    background-color: white;
    border-radius: 22.7px;
    width: 85%;
    text-align: right;
    display: inline-block;
    margin-top: 2vh;
    direction: ltr; }
    #rightPart .characteristic .inner {
      padding: 10%; }
  #rightPart .disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none; }
  #rightPart h2 {
    color: #fff;
    background-color: #2266ff;
    margin: 0;
    border-radius: 22.7px 22.7px 0 0;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
    text-align: right;
    padding-right: 10%; }
  #rightPart h3 {
    font-size: 12px;
    color: #808080;
    margin-bottom: 0;
    margin-top: 0px; }
  #rightPart ul {
    padding: 0;
    margin: 0;
    text-align: left;
    margin-top: 5px; }
  #rightPart li {
    display: inline-block;
    font-size: 0.6em;
    text-align: center;
    cursor: pointer;
    color: #808080; }
  #rightPart .wheelSizes li {
    text-align: center;
    width: 36%; }
  #rightPart .wheelSizes li:first-child {
    text-align: left;
    width: 27%; }
    #rightPart .wheelSizes li:first-child div {
      padding-left: 7px; }
  #rightPart .wheelSizes li:last-child {
    text-align: right;
    width: 37%; }
    #rightPart .wheelSizes li:last-child div {
      padding-right: 17px; }
  #rightPart .wheelSizes li.selected, #rightPart .wheelSizes li:hover {
    color: #2266ff;
    font-weight: bold; }
  #rightPart #btns {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 85%;
    margin-bottom: 2.5vh;
    margin-right: 7.5%; }
  #rightPart .button {
    border-radius: 30px;
    width: 46%;
    border: 2px solid #2266ff;
    display: inline-block;
    height: 30px;
    padding-top: 10px;
    margin-top: 20px;
    color: #2266ff;
    float: right;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer; }
  #rightPart .button:hover {
    background-color: #2266ff;
    color: #fff; }
  #rightPart .button:last-child {
    background-color: #2266ff;
    color: #fff;
    float: left; }
  #rightPart #start {
    pointer-events: none;
    opacity: 0.5; }
  #rightPart .clearAll {
    font-size: 12px;
    color: #2266ff;
    width: 68%;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px; }
  #rightPart .clearAll:hover {
    opacity: 0.8; }
  #rightPart #run:hover {
    opacity: 0.8 !important; }

#leftPart {
  width: 1000px;
  float: left;
  height: 100vh;
  background-color: #f2f2f2; }
  #leftPart .border {
    border: solid 30px #f2f2f2;
    height: calc(100vh - 60px);
    border-radius: 50px;
    background-image: url(images/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  #leftPart #bg {
    position: relative;
    height: 561px;
    width: 730px;
    top: 50%;
    margin-top: -250px;
    background-image: url(images/engine.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: calc(50% - 340px); }
  #leftPart #gears {
    position: absolute;
    top: 108px;
    right: 3px; }
  #leftPart #anim {
    top: -44px;
    position: absolute;
    right: 34px;
    height: 150px;
    width: 320px; }
  #connect {
      position: absolute;
      width: 300px;
      height: 50px;
      top: 250px;
      right: -37px;
  }
@keyframes moveCloud {
  0% {
    width: 5px;
    height: 5px;
    right: 700px;
    top: 47px;
    opacity: 1; }
  100% {
    width: 200px;
    height: 40px;
    right: 600px;
    top: -130px;
    opacity: 0; } }
@keyframes moveCloud1 {
  0% {
    width: 5px;
    height: 5px;
    right: 700px;
    top: 47px;
    opacity: 1; }
  100% {
    width: 200px;
    height: 40px;
    right: 600px;
    top: -130px;
    opacity: 0; } }
  #leftPart #cloud, #leftPart #cloud2 {
    width: 0px;
    height: opx;
    position: absolute; }
  #leftPart #cloud.move {
    animation-name: moveCloud;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }
  #leftPart #cloud2.move {
    animation-name: moveCloud1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 2s; }

.fullScreen {
  width: 5%;
  left: 1%;
  position: absolute;
  top: 3%; }

.fullScreen:hover {
  opacity: 0.5;
  cursor: pointer; }

@media screen and (max-width: 1024px) {
  #main {
    width: 100%;
    font-size: 11px; }

  #rightPart {
    width: 20%; }
    #rightPart .instructions {
      font-size: 12px; }
    #rightPart .button {
      border-radius: 30px;
      width: 46%;
      height: 20px;
      padding-top: 5px;
      font-size: 11px; }
    #rightPart .characteristic {
      margin-top: 2vh; }
    #rightPart h2 {
      font-size: 12px;
      padding-top: 8px;
      padding-bottom: 8px; }
    #rightPart ul {
      margin-top: 0; }
    #rightPart .wheelSizes li {
      width: 37%; }
      #rightPart .wheelSizes li img {
        width: 58%; }
      #rightPart .wheelSizes li:first-child {
        width: 25%; }
        #rightPart .wheelSizes li:first-child img {
          width: 50%; }
      #rightPart .wheelSizes li:last-child {
        width: 36%; }
        #rightPart .wheelSizes li:last-child img {
          width: 70%; }
    #rightPart #rightPart h3 {
      margin-top: 3px;
      font-size: 11px; }
    #rightPart .clearAll {
      font-size: 11px; }

  #leftPart {
    width: 80%; }
    #leftPart #bg {
      height: 338px;
      width: 482px;
      top: 70%;
      margin-top: -250px;
      margin-right: calc(50% - 221px); }
    #leftPart #gears {
      position: absolute;
      top: 53px;
      right: 1px;
      width: 425px; }
    #leftPart #anim {
      top: -45px;
      position: absolute;
      right: 25px;
      height: 98px;
      width: 202px; }
      
  #connect {
    top: 130px;
    right: -75.5px;
}
  @keyframes moveCloud {
    0% {
      width: 5px;
      height: 5px;
      right: 465px;
      top: 14px;
      opacity: 1; }
    100% {
      width: 50px;
      height: 20px;
      right: 435px;
      top: -80px;
      opacity: 0; } }
  @keyframes moveCloud1 {
    0% {
      width: 5px;
      height: 5px;
      right: 465px;
      top: 14px;
      opacity: 1; }
    100% {
      width: 50px;
      height: 20px;
      right: 435px;
      top: -80px;
      opacity: 0; } }
    #leftPart #cloud, #leftPart #cloud2 {
      width: 0px;
      height: opx; } }

/*# sourceMappingURL=styles.css.map */