.woocommerce-tabs {
	#reviews  {
		margin: 0 auto;

		#comments {
			padding-right: 60px;
			width: 55%;
			float: left;

			@include breakpoint(large down) {
				padding-right: 0;
				float: none;
				width: 100%;
			}

			h2.woocommerce-Reviews-title {
				font-size: 30px;
				font-weight: 600;
				margin-bottom: rem-calc(10);

				@include breakpoint(small only) {
					margin-bottom: rem-calc(30);
				}
				span {
					font-weight: 600;
				}


			}

			.commentlist {
				list-style: none;
				margin: rem-calc(30) 0 0 0;
				padding: 0;
			}

			.comment_container {
				padding: 0;
				position: relative;
				margin-bottom: rem-calc(20);
				text-align: left;

				.comment-text {
					padding-left: rem-calc(90);

					@include breakpoint(small only) {
						padding-left: rem-calc(70);
					}
				}
			} 

			.avatar {
				position: absolute;
				left: 0;
				top: 0;
				width: rem-calc(70);
				height: rem-calc(70);
				margin: rem-calc(5) 0 rem-calc(10) 0; 
				border-radius: rem-calc(70); 

				@include breakpoint(small only) {
					width: rem-calc(50);
					height: rem-calc(50);
				}						        	
			} 
			.star-rating {
				float: right;
				display: inline-block;
				margin: rem-calc(10) 0 rem-calc(10);

				@include breakpoint(small only) {
					float: none;
					margin: rem-calc(4) 0 rem-calc(10);
				}             	
			} 

			.meta {
				display: inline-block;
				padding-top: rem-calc(5);
				margin-bottom: rem-calc(0);

				@include breakpoint(small only) {
					display: block;
				} 
				strong {
					&.woocommerce-review__author {
						color: #000;
						margin-right: 10px;
						font-weight: 600;
						display: inline-block;
						font-size: rem-calc(24);  
						line-height: 1.2;  

						@include breakpoint(small only) {
							font-size: rem-calc(22); 
						}         			
					}
				}

				.woocommerce-review__dash {
					display: none;
				}

				em.verified {
					display: inline-block;
					font-size: rem-calc(16);
					line-height: 1;
					top: -10px;
				}

				time {
					width: 100%;
					color: #666;
			        display: block;
			        font-weight: 300;
			        font-size: rem-calc(16);               		
				}
			} 

			.description  {
			    margin: 0;
			    line-height: 1.6em;               	
				padding: rem-calc(10) 0 rem-calc(20) 0;

				@include breakpoint(small only) {
					padding: 0 0 rem-calc(20) 0;
				}

			    p {
			    	font-size: rem-calc(20);
			    	line-height: 1.4;
			        padding: 0;
			        margin: 0 auto;

			        @include breakpoint(small only) {
			        	font-size: rem-calc(18);
			        }
			    }                	
			}

		}

		#review_form_wrapper {
			border-left: 1px solid #f0f0f0;
			padding-left: 60px;
			padding-bottom: 40px;
			width: 45%;
			float: left;

			@include breakpoint(large down) {
				border-left: none;
				float: none;
				width: 100%;
				padding-left: 0;
			}

			h3, .comment-reply-title {
				font-size: rem-calc(30);
				line-height: 1.2;
				font-weight: 600;	
				margin: 0;			
			}

			.comment-form {
				p.comment-notes {
					margin-top: rem-calc(10);
					font-size: 16px;
				}
				.comment-form-rating {
					margin-top: rem-calc(30);
				}
				.stars {
					position: relative;
					display: inline-block;
					vertical-align: middle;
					white-space: nowrap;


					a {
						position: absolute;
						top: 0;
						left: 0;
						text-decoration: none;
						letter-spacing: 3px;
						font-size: 0;

						&:before {
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							text-indent: 0;
							transition: all 0.3s ease;
							color: #ffcc33;
							height: 22px;
							font-size: 22px;
							line-height: 1;							
						}

						&:after {
							content: "";
						}						


						
						&.star-1 {
							z-index: 5;
							&:before {
								@include barberry-icon('\ea07');
								width: 20px;
							}
							&.active:before,
							&:hover:before {
								@include barberry-icon('\ea08');
							}							
						}

						&.star-2 {
							z-index: 4;
							&:before {
								@include barberry-icon('\ea07\ea07');
								width: 47px;
							}	
							&.active:before,		
							&:hover:before {
								@include barberry-icon('\ea08\ea08');
							}												
						}

						&.star-3 {
							z-index: 3;
							&:before {
								@include barberry-icon('\ea07\ea07\ea07');
								width: 71px;
							}	
							&.active:before,		
							&:hover:before {
								@include barberry-icon('\ea08\ea08\ea08');
							}	
						}
						&.star-4 {
							z-index: 2;
							&:before {
								@include barberry-icon('\ea07\ea07\ea07\ea07');
								width: 97px;
							}	
							&.active:before,		
							&:hover:before {
								@include barberry-icon('\ea08\ea08\ea08\ea08');
							}								
						}
						&.star-5 {
								z-index: 1;
								&:before {
									@include barberry-icon('\ea07\ea07\ea07\ea07\ea07');
									width: 122px;
								}	
								&.active:before,		
								&:hover:before {
									@include barberry-icon('\ea08\ea08\ea08\ea08\ea08');
								}								
						}						

					}

					// &.selected {
					// 	a.active {
					// 		~ a::before {
					// 			content: "\ea07";
					// 		}
					// 	}
					// }

					// &.selected {
					// 	a.active,
					// 	a:not(.active) {
					// 		&:before {
					// 			content: "\ea08";
					// 			color: #ffcc33;
					// 			// opacity: 1
					// 		}
					// 	}
					// }

				}
			}



		}
	}
}