/*
Theme Name:         Sam The Paving Man
Description:        Custom theme made from Sage WordPress starter theme. <a href="https://github.com/roots/sage">Contribute on GitHub</a>
Version:            1.2.0
Text Domain:        sage
License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/* OVERRIDES - main-20ddb49714.css has CSS that isn't in the sass files - from now on all css should be overridden here. */

/* HOMEPAGE YT VIDEO */
#loading { display: none; }
.video-foreground, .video-foreground iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

@media (min-aspect-ratio: 16/9) {
	.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
	.video-foreground { width: 300%; left: -100%; }
}

/* HEADER */
body.fancybox-active .site-header,
.site-header.headroom--unpinned { padding: 0; }
body.fancybox-active .site-header .sam-navbar-brand,
.site-header.headroom--unpinned .sam-navbar-brand { font-size: 17px; }

/* LAZY LOAD */
.no-js img.lazy { display: none; }
.js img.lazy { display: block; }
.brands__item img { -webkit-transition: none; /* Safari */ transition: none;}

/* SLICK GALLERY */
.page-content .gallery { width: 100vw; position: relative; margin-left: -50vw; left: 50%; height: 450px; margin-top: 72px; }
.page-content .gallery .gallery-item, .page-content .gallery .slick-slide { height: 100%; max-height: 450px; position: relative; margin: 0 10px; }
.page-content .gallery .gallery-icon { position: relative; height: 100%; }
.page-content .gallery p { max-height: 100%; }
.page-content .gallery img { position: relative; height: 100%; max-height: 450px; width: auto; }
.page-content .gallery .wp-caption-text { padding: 9px; position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); right: 0; color: #fff; z-index: 100; }

.fader { height: 450px; }
.fader .slide { height: 100%; }
.fader .slide img { min-height: 100%; min-width: 100%; max-width: none; width: auto !important; position: absolute; left: 50%; transform: translateX(-50%); }

/* PRODUCTS PAGE */
.category-callout {	width: 100%; overflow: hidden; }
.category-callout a { background-color: #000; display: block; }
.category-callout .category-callout__info { min-height: 400px; -webkit-transition: all 0.2s; /* Safari */ transition: all 0.2s; }
.category-callout .category-callout__image { height: 100%; width: 100%; top: 0; left: 0; background-position: center center; min-height: 400px; transition: width 0.2s, height 0.2s, left 0.2s, top 0.2s;  }
.category-callout__info .name { text-transform: uppercase; }
.category-callout a:hover .category-callout__image { height: 110%; top: -5%; width: 110%; left: -5%; opacity: 0.8; }
.category-callout a:hover .category-callout__info { opacity: 0.9; }

/* SINGLE PRODUCT */
h2.product__name { margin: 0; padding: 0; background-color: transparent !important; }
h2.product__name span { float: left; }
.product-flag { float: right; }
.productThumb { color: #f3f3f3; }
.product__thumb { position: relative; width: 100%; height: 0; padding-bottom: 100%;/*  overflow: hidden; */ }
.product__thumb img { position: absolute; top: 0; left: 0; width: 100%; }
.product__new { position: absolute; top: 15px; left: -0.5em; z-index: 100; display: block; width: auto; height: auto; text-transform: uppercase; padding: 0.35em 1.5em 0.64em; color: #fff; font-weight: 700; font-size: 14px; background: transparent url(assets/images/ribbon-new.png) no-repeat left center; background-size: cover; }
.single-product .product__new { font-size: 19px; }

/* TRANSITIONS */
.product__stock, 
.site-header,
h1.site-name,
.sam-navbar-brand {
	-webkit-transition: all 0.2s; /* Safari */
	transition: all 0.2s;
}

/* CATEGORIES */
.category-view__banner { background-color: #000; overflow: hidden; }
.category-view__banner img { min-height: 100%; min-width: 100%; width: auto; height: auto; max-width: none; display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.products-grid__item { clear: none !important; }
.product__stock { opacity: 0; }
.products-grid__item a:hover .product__stock, .products-grid__item a:active .product__stock { opacity: 1; }
#IEmsg { display: none; margin-left: 15px; }
#pdfs-right { text-align: right; }

/* FILTERS */
#filters { }
.sidebar__product-filter { margin-bottom: 0; }
.sidebar__product-filter .name a { font-size: 1.5rem; }
.sidebar__product-filter .checkbox, 
.sidebar__product-filter .radio { margin: 0 0 0 5px; line-height: 1.5; font-size: 14px; }

#construction { padding-top: 10px; padding-bottom: 5px; }
#construction label { display: inline-block; overflow: hidden; position: relative; font-size: 18px; }
#construction label.selected { font-weight: bold; }
#construction input { position: absolute; top: 0; left: -40px; }

#filter-title { overflow: hidden; border-bottom: 1px solid #000; padding: 20px 0 10px; margin: 0; position: relative;  }
#filter-title h3 { margin: 0; font-weight: bold; text-transform: uppercase; }
#filter-title h3 a { color: #000; }
#clear-filters { font-size: 1rem; line-height: 1; cursor: pointer; display: none; }
#clear-filters:hover { color: #646464; }

/* FANCY BOX */
.fancybox-content { top: 47px; }
.fancybox-navigation { z-index: 99996; position: absolute; width: 100%; top: 50%; margin-top: -1.6rem }
.project-gallery__big-image { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* GALLERY */
.project-showcase__image { background-position: center center; background-size: cover; }

@media (max-width: 990px) {
	.fader { height: 350px; }
	.gallery { height: 350px; margin-top: 72px; }
	#filter-title { position: absolute; top: -64px; height: 64px; left: 15px; right: 15px; padding: 1rem 0; }
	#filter-title h3 { font-size: 15px; background-color: #fff; display: inline-block; border: 1px solid #000; padding: 10px 15px; margin-top: 3px; float: right;  }
	#clear-filters { float: right; margin: 13px; font-size: 1.5rem; }
	.sidebar__product-filters { position: absolute; top: 2px; right: 15px; left: 15px; padding: 15px; z-index: 1000; background-color: #fff; border: 1px solid #000; display: none; }
	.category-callout .category-callout__image, .category-callout .category-callout__info { min-height: 200px; }
	
}

@media (max-width: 768px) {
	.fader { height: 250px; }
	.gallery { height: 250px; margin-top: 72px; }
	#pdfs-right { text-align: left; border-top: 1px solid #909090; padding-top: 2rem; margin-top: 2rem; }
}

/* This was in the header.php template file - who know why? */
/* The Modal (background) */
.xmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
	 z-index:99999;
}

/* Modal Content */
.xmodal-content {
    position: relative;
    background-color: rgba(0,0,0,0.9);
    margin: auto;
    padding: 0;
    width: 450px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.xclose {
    color: white;
    font-size: 10pt;
	 text-decoration:underline;
	 padding-bottom:20px;
	 padding-top:20px;
}

.xclose:hover,
.xclose:focus {
    color: #555;
    text-decoration: none;
    cursor: pointer;
}

.xcontent {
	padding-left:15px;
	padding-right:15px;
	padding-top:10px;
    color: white;
	 font-size:14pt;
}

.xmodal-body {padding: 2px 16px;}

.xmodal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.xlogo{
	padding-top:20px;
}
.xbuttons{
	padding-top:20px;
	padding-bottom:20px;
}
.xbuttonleft{
	float:left;
	width:50%;
	text-align:center;
}
.xbuttonleft a{
	color:#000;
	background-color:#D7D7D7;
	padding:5px 15px;
}
.xbuttonleft a:hover{
	background-color:#FFF;
}
.xbuttonright{
	float:right;
	width:50%;
	text-align:center;
}
.xbuttonright a{
	color:#000;
	background-color:#D7D7D7;
	padding:5px 15px;
}
.xbuttonright a:hover{
	color:#000;
	background-color:#FFF;
	padding:5px 15px;
}