.modal #renderjs {
  width: 100%;
  float:left;
}

.modal .pmodal_buttons {
  margin-left:24px;
  float:left;
}

.modal_render {
  float:left;
  width:100%; 
  height: 350px;
  overflow: hidden;
  margin-bottom:15px;
}

.modal_render #its_a_render, .modal_render #flat_pattern {
  float: left; 
  padding: 0 0 5% 5%;
}

.modal_render #its_a_render {
  width: 55%; 
}

.modal_render #flat_pattern {
 width: 92%;
}


#flat_pattern {
  padding:10px; 
  float:left;
}

#pattern_preview {
  overflow:hidden;
  position:relative;
}

div.thumbnail {
  float: right;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  margin:8px;
  text-transform: uppercase;
  font-weight:bold;
  text-align:center;
  width: 89px;
}

div.thumbnail img {
  background-color:white;
  border: 1px solid #e3e3e3;
  padding: 5px;
  width: 50px;
  height:50px;
}

div.steps {
  width:100%;
  float:left;
}

div.step {
  width:28%; 
  padding-left:10px; 
  display:inline-block;
  font-family: 'Lato';
  font-weight: 900;
}

div.step p {
  font-size:13px;
  color: #dfdfdf;
  text-transform:uppercase;
  text-align:center;
  float: left;
  padding-right: 10%;
  width:100px;
}

div.circle {
  width:55%;
  padding-left:20%;
  float:left;
}

div.step div.circle div {
  float:left;
  width: 50px;
  padding-top:50%;
  line-height:1em;
  margin-top:-0.5em;
  text-align:center;
  color:white;
  font-size: 30px;
}

.circle-text {
  width:50%;
  padding-bottom: 10px;
}
.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
    background: #dfdfdf; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    color:white;
}

.active:after {
  background: #6d8d22;
}

div.active_text p {
  color:#5A4A42;
}

div.active_text a {
  color:#5A4A42;
}

.visited:after {
  background: #aba197;
}

.visited_text p {
  color:#aba197;
}

.link_color a {
  color:#aba197;
}

.price123 {
  float:right; 
  text-align:right;
}

.price123 div {
  margin-bottom: 15px;
}

.right_side {
  float:left; 
  padding-right: 5px;
  width:100%;
}

.right_side #next_button {
  margin-right: 7%;
  margin-bottom: 3.5%;
}

.left_side {
  position:relative;
  float:left;
  overflow: hidden;
  border-right: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  width:93%;
}

#flat_pattern {
  width: 73%;
}

.features {
  padding:5px; 
  margin-bottom:10px; 
  float:left;
  width:100%
}

#h-slider {
  float:left;
  margin-left: 12px;
  margin-top: 9px;
}

#v-slider {
  margin-left: 27px;
  float:left;
}

.slider_text {
  text-transform:uppercase;
  font-size:10px;
  color:#584a49;
  font-weight:bold;
}

.slider_up {
  margin: 0 0 5px 27px;
}

.slider_down {
  margin-left: 19px;
  margin-top: -85px;
}

.slider_left {
  margin-left: 47px;
  float:left;
}

.slider_right {
  margin-left: 10px;
  float:left;
}

#objectRotation div {
  text-transform:uppercase;
  font-size:10px;
  font-weight: bold;
  text-align:center;
  width:100%;
  padding-top:3%;
}

#objectRotation img {
  padding: 0 10px 10px 10px;
}

#objectRotation p {
  margin: 0 0 10px 0;
}

#renderer canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width:360px;
  height:360px;
}

.size_chart {
  font-weight: bold;
}

.arrow {
  display:inline-block;
  padding: 3% 1%;
  vertical-align:top;
}

/*selected design section*/
.little_thumbnail {
  border: 1px solid #CCCCCC;
  padding: 5px;
  width: 60px;
  height: 60px;
  margin-right:5px;
}

.little_thumb_div {
  float:left;
  padding: 4px;
  margin-right:5px
}

.selected_design {
  padding:5px;
  float:left; 
  width:100%; 
  margin-bottom: 10px; 
  border-top: 1px solid #CCCCCC; 
  border-bottom: 1px solid #CCCCCC;
}
.chosen_design_head {
  padding:7px 2px 15px 2px; 
  font-size:14px;
}
/*end of selected design section*/

/*add to cart section*/
.add_to_cart_data {
  padding-bottom: 2.5%;
}
.add_to_cart_price {
  padding-bottom: 2.5%;
  float: right;
  font-weight: bold;
}
.add_to_cart_div {
  padding: 2%; 
  float: left; 
  width: 100%; 
  margin-bottom: 10px; 
  border-top: 1px solid #CCCCCC;
}

.add_to_cart_sub {
  background-color: #ecece6;
  width: 80%; 
  float: left; 
  padding: 1.5% 4% 4% 4%; 
  margin-top: 3%;
}

.add_to_cart_total {
  padding-right: 1.5%;
  padding-top: 3%;
  float: right;
}

.add_to_cart_total_price {
  font-weight: bold; 
  float: right; 
  padding-top: 3%;
}

.add_to_cart_line {
  border-top: 1px solid #aba7a3;
}

.add_to_cart_total_sec {
  font-size: 16px;
  margin: 2% 0%;
}

.add_to_cart_table {
  font-size: 14px; 
  width: 100%;
}

.webglmessage {
  padding:30%;
  width:40%;
  text-align:center;
}

/*end of add to cart section*/

/*index page*/

.index_text {
  padding: 5% 2% 2% 2%;
  width: 90%;
}

div.index_text p {
  color:#5A4A42;
}

.center_button {
  margin-left: auto;
  margin-right: auto;
  width: 32%;
  padding:2%;
}

.center_longer {
  margin-left: auto;
  margin-right: auto;
  width: 48%;
  padding:2%;
}

.pattern_box {
  margin-bottom:20px; 
  display:inline-block; 
  width: 95%;
}

.pattern_box center {
  padding-top:5px;
}

.pattern_box_center {
  margin: 0 auto 5% auto;
}

.index_carousel {
  width: 88%;
  margin: 5% 0 0 5%;
  
}

/*end of index page*/

#patterns_select {
  position: relative;
  bottom: 10px;
  left: 5px;
  display: block;
}

@media all and (min-width: 600px) {
  div.circle {
    padding-left:12%;
  }
}

@media all and (min-width: 768px) {
  div.circle {
    padding-left:20%;
  }
  
  div.steps {
    width:64%;
  }
  
  div.step {
    width: 18%;
  }
  
  .right_side {
    width:32%;
    float:right;
  }
  
  
  .right_side #next_button {
    margin:0;
  }
  
  .left_side {
    width:67%;
  }
  
  .features {
    width: 100%;
  }
  
  .the_drawers {
    width: 100%;
  }
  
  #renderer canvas {
    width:450px !important;
    height:450px !important;
  }
  
  div.thumbnail {
    width: 91px;
  }
  
  div.thumbnail img {
    width: 75px;
    height:75px;
  }
  
  #objectRotation div {
    width: 100%;
  }
  
  .add_to_cart_sub {
    float: right;
  }
  
  .size_chart {
    float:right;
  }
  
  .index_text {
    padding: 3% 2% 2% 2%;
    width: 36%;
    float:right;
  }
  
  .center_button {
    float:left;
    padding: 4% 0% 3% 0%;
    width: 100%;
  }
  
  .center_longer {
    float:left;
    padding: 4% 0% 3% 0%;
    width: 100%;
  }
  
  .pattern_box {
    width:47%;
    margin-right: 0.5%;
  }
}