Order Success

Thanks!

Your order #1 has successfully been placed. You'll find all the details about your order below.

Your order

Hayward Aquavac 600 robotic pool cleaner with caddy

$1449.00

Hayward Aquavac 600 robotic pool cleaner

$449.00

111

Hayward Aquavac 600

$2449.00

Cart totals

Subtotal

$179.99

Shipping

Free

HST (0%)

No Tax

Total

$179.99

HTML

<section class="checkout || order_success">
	<div class="wrapper">
		<div class="row_f || checkout_wrap">
			<div class="col_12">
				<div class="order_text">
					<h1>Thanks!</h1>
					<p>Your order #1 has successfully been placed. You'll find all the details about your order below.</p>
				</div>
			</div>
			<div class="col_8 || col_sm_12">
				<div class="checkout_header || checkout_header_order">
					<div class="checkout_title">
						<h2>Your order</h2>
					</div>
				</div>
				<div class="order_wrap">
					<div class="checkout_order_item">
						<a href="/img/product1.png" data-fancybox="product1" class="img_wrap">
							<img src="/img/product1.png" alt="">
							<span class="qty">1</span>
						</a>
						<div class="checkout_order_desc">
							<div class="checkout_order_name">
								<p>Hayward Aquavac 600 robotic pool cleaner with caddy</p>
							</div>
							<div class="checkout_order_price">
								<p>$1449.00</p>
							</div>
						</div>
					
					</div>
					<div class="checkout_order_item">
						<a href="/img/product2.png" data-fancybox="product2" class="img_wrap">
							<img src="/img/product2.png" alt="">
							<span class="qty">10</span>
						</a>
						<div class="checkout_order_desc">
							<div class="checkout_order_name">
								<p>Hayward Aquavac 600 robotic pool cleaner</p>
							</div>
							<div class="checkout_order_price">
								<p>$449.00</p>
							</div>
						</div>
					</div>
					<div class="checkout_order_item">
						<a href="/img/product3.png" data-fancybox="product3" class="img_wrap">
							<img src="/img/product3.png" alt="">
							<span class="qty">111</span>
						</a>
						<div class="checkout_order_desc">
							<div class="checkout_order_name">
								<p>Hayward Aquavac 600</p>
							</div>
							<div class="checkout_order_price">
								<p>$2449.00</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col_4 || col_sm_12 || order_col || sticky_block">
				<div class="row_f || cart_totals_wrap">
					<div class="col_12">
						<h4>Cart totals</h4>
					</div>
					<div class="col_6">
						<p>Subtotal</p>
					</div>
					<div class="col_6 || tr">
						<p> $<span>179.99</span></p>
					</div>
					<div class="col_6">
						<p>Shipping</p>
					</div>
					<div class="col_6 || tr">
						<p><span>Free</span></p>
					</div>
					<div class="col_12">
						<hr>
					</div>
					<div class="col_6">
						<p>HST (<span>0</span>%)</p>
					</div>
					<div class="col_6 || tr">
						<p><span>No Tax</span></p>
					</div>
					<div class="col_12">
						<hr>
					</div>
					<div class="col_6 || total_col">
						<p>Total</p>
					</div>
					<div class="col_6 || total_col || total_col_price || tr">
						<p>$<span>179.99</span></p>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</section>

CSS

.order_success .wrapper{max-width:80rem}
.order_success .order_text{text-align:center;margin:0 0 2rem}
.order_success .cart_totals_wrap{width:100%;float:none}

@media only screen and (max-width: 767px) {
	.order_success .cart_totals_wrap{width:25rem;float:right}
}

SCSS

.order_success {
	.wrapper {
		max-width: 80rem;
	}
	
	.order_text {
		text-align: center;
		margin: 0 0 2rem;
	}
	
	.cart_totals_wrap {
		width: 100%;
		float: none;
	}
}

@media only screen and (max-width: 767px) {
	.order_success .cart_totals_wrap {
		width: 25rem;
		float: right;
	}
}