/*
Theme Name: TSS Supply Child
Template: tsssupply
*/


/* BLOG PAGE STYLING */
.articles,
.row {
	position: relative;
   	display: flex;
    flex-wrap: wrap;
	margin-right: -20px;
    margin-left: -20px;
}

.article,
.blog-content, 
.sidebar {
	position: relative;
    width: 100%;
    padding: 20px;
	transition: .3s all;
}

.article:hover {
	border-radius: 3px;
    background: rgb(255 255 255 / 68%);
    box-shadow: 0px 5px 10px -8px rgb(0 0 0 / 51%);
}

.article h2 {
	font-size: 1.5rem;
	line-height: 1.4;
}

.site-main .container-norm .article h2 a {
	font-weight: normal;
    color: #3c3c3c;
}

.sidebar h4 {
	font-family: 'Anton', sans-serif;
    font-weight: normal;
    font-size: 1.5em;
    margin-top: 0;
    line-height: 1.5;
}

.site-main .container-norm .sidebar ul li {
	margin-bottom: 1rem;
}

.site-main .container-norm .sidebar ul li:before {
	border: 3px solid red;
    border-radius: 50%;
}

@media (min-width: 800px) {
	.article {
    	flex: 0 0 50%;
    	max-width: 50%;
	}
}

@media (min-width: 1200px) {
	.article,
	.sidebar {
    	flex: 0 0 33.333333%;
    	max-width: 33.333333%;
	}
	
	.blog-content {
		flex: 0 0 66.666667%;
    	max-width: 66.666667%;
		padding-right: 120px;
	}
}


/* WOOCOMMERCE PAGE STYLING */
body.woocommerce .site-main {
	max-width: unset;
    padding: 0;
    overflow: inherit;
}

body.woocommerce .related {
	padding: 0;
}

body.woocommerce .related:before {
	content: none;
}

body.woocommerce .upsells.products {
	order: 4;
	width: 100%;
}

.woocommerce .upsells ul.products li.product a img {
	width: 100% !important;
	max-height: unset !important;
}

.woocommerce .upsells .woocommerce-Price-currencySymbol {
	margin-left: 0;
}

body.woocommerce .upsells.products ul,
body.woocommerce .upsells ul.products {
	justify-content: flex-start;
}

body.woocommerce .related {
	order: 5;
}

body.woocommerce div.product div.images.woocommerce-product-gallery {
	flex-direction: column;
}

body.woocommerce div.product div.woocommerce-product-gallery.images,
body.woocommerce-page div.product div.woocommerce-product-gallery.images {
	width: 48%;
}

body.woocommerce div.product div.woocommerce-product-gallery.images .woocommerce-product-gallery__wrapper {
	max-width: unset;
}

@media (max-width: 780px) {
	body.woocommerce div.product div.woocommerce-product-gallery.images,
	body.woocommerce-page div.product div.woocommerce-product-gallery.images {
		order: 2;
	}
}