.linemid {
	line-height: 40px;
}

.btn-smaller {
	height: 20px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    color: white;
    margin-bottom: 4px !important;
    border-radius: .2rem !important;
	margin: 2px 30px !important;
  }

.keyfeature {
	border-radius: 10px 10px 10px 10px;
    margin-bottom: 20px;
}

.text-black {
	color: #000;
}

.smallround {
	    border-radius: 5px;
}

.blktext {
	color: #000;
}

.whttext {
	color: #fff;
}

.bluetext {
	color: darkcyan;
}

.textshade {
	/*text-shadow: 1px 1px darkcyan;*/
	text-shadow: 1px 1px hsla(180, 100%, 10%, 1);
}

/* ENGRAVING-BG */


.sublead {
	font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 22pt;
	/*font-size: 17px;*/
    margin: 20px 0 0 0;
}

.engbanner {
	font-size: 80px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.015em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

h2.engsub {
	font-size: 32px;
    line-height: 1.125;
    font-weight: 600;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	padding-top: 40px;
}

.pagefill {
	font-size: 23px;
    line-height: 1.34783;
    font-weight: 400;
    letter-spacing: .01em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.topfill {
	margin-top: 300px;
}

.bottomfill {
	margin-bottom: 400px;
}

.top100 {
	margin-top: 100px;
}

.bottom100 {
	margin-bottom: 100px;
}

.engraphic {
	background-image: url(/images/20lockers.jpg);
    height: fit-content; 
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 1px;
    padding-bottom: 50px;
}

.backwhite {
	background-color: #fff;
}

.darkbox {
	width: 50%;
    background-color: #000000cc;
	margin-top: 400px;
	min-height: 300px;
}

.tealbox {
	width: 50%;
	background-color: #01aeb4ee;
	margin-top: 400px;
	min-height: 300px;
}

h3.callout {
	font-family: 'Raleway', sans-serif;
	font-size: 32px;
    line-height: 1.125;
    font-weight: 600;
    letter-spacing: .004em;
	padding-top: 40px;
}

/*lockers*/

.product-locker {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 100px;
    /*height: 540px;*/
	height: 90%;
    background-color: #333;
    border-radius: 5px;
	max-height: 530px;
}

.product-locker-2 {
    top: -10%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #333;
	z-index: 1;
	position: absolute;
	width: 100px;
    height: 90%;
	border-radius: 5px;	
}


.product-locker::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
	background-image: url(/images/locker1.jpg);
	background-size: contain;
}

.product-locker-2::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
	background-image: url(/images/locker2.jpg);
	background-size: contain;
}

.product-locks {
    position: absolute;
    right: 10%;
    bottom: 20%;
    width: 100px;
	height: 100px;
    background-color: #333;
    border-radius: 5px;
	background-repeat: no-repeat;
}

.product-locks-2 {
    top: 20%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
	z-index: 1;
	position: absolute;
	width: 100px;
    height: 100px;
	border-radius: 5px;
	background-repeat: no-repeat;	
}

.product-locks-big {
    position: absolute;
    right: 10%;
    bottom: 20%;
    width: 200px;
	height: 200px;
    border-radius: 5px;
	background-repeat: no-repeat;
}

.product-locks-big-2 {
    top: 20%;
    right: auto;
    bottom: 0;
    left: 5%;
	z-index: 1;
	position: absolute;
	width: 200px;
    height: 200px;
	border-radius: 5px;
	background-repeat: no-repeat;
}

.product-locks::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
	background-size: contain;
}

.product-locks-2::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
	background-image: url(/images/lock-placeholder.png);
	background-size: contain;
}

.product-locks-big::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    border-radius: 5px;
	background-size: contain;
	background-repeat: no-repeat;
}

.product-locks-big-2::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: "";
    border-radius: 5px;
	background-image: url(/images/lock-placeholder.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.product-locks-big.hasp::before {
	background-image: url(/images/locks/hasp-back.png);
}

.product-locks-big-2.hasp::before {
	background-image: url(/images/locks/hasp-front.png);
}

.product-locks-big.cam::before {
	background-image: url(/images/locks/cam-back.png);
}

.product-locks-big-2.cam::before {
	background-image: url(/images/locks/cam-front.png);
}

.product-locks-big.coin::before {
	background-image: url(/images/locks/coin-back.png);
}

.product-locks-big-2.coin::before {
	background-image: url(/images/locks/coin-front.png);
}

.product-locks-big.nfc::before {
	background-image: url(/images/locks/nfc-front.png);
}

.product-locks-big-2.nfc::before {
	background-image: url(/images/locks/nfc-band.png);
}

.lockbox {
	width: 200px;
    height: 200px;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
}

.engraving {
    background-color: none;
    z-index: 1;
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 5px;
}

.bg-mutedred {
    background-color: rgba(205, 0, 67, 1)!important;
}

.bg-lightblue {
    background-color: lightblue !important;
}

.eng-1 {
    right: 5%;
    bottom: 20%;
    background-image: url(/images/engraving/laddies.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.eng-2 {
    top: 20%;
    right: auto;
    bottom: 0;
    left: 5%;
	background-image: url(/images/engraving/7.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 60px;
}

.eng-3 {
    top: 40%;
    right: auto;
    bottom: 0;
    left: 15%;
	background-image: url(/images/engraving/ladies.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.eng-4 {
    right: 20%;
    bottom: 50%;
	background-image: url(/images/engraving/mens.png);
	background-repeat: no-repeat;
	background-size: contain;
}



#low-traffic-dry {
    background-image: url(/images/locker-types/dry-area.jpg);
	background-size: cover;
    background-repeat: no-repeat;
}

#high-traffic-dry {
    background-image: url(/images/locker-types/robust-dry-area.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	background-position-x: 50%;
}

#low-traffic-wet {
    background-image: url(/images/placeholder.jpg);
	background-size: cover;
    background-repeat: no-repeat;
}

#high-traffic-wet {
    background-image: url(/images/locker-types/wet-area.png);
	background-size: cover;
    background-repeat: no-repeat;
	background-position-y: 70%;
}

#carousel .carousel-container {
    padding: 0;
	max-height: 
}

.container.marketing.pad {
    margin-top: 30px;
}

.carousel-caption {
    top: 20px;
    width: 100%;
	left: 0;
}

.carousel-slogan {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 22pt;
	margin-bottom: 0;	
}


.carousel-head {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 2px;
}


.carousel-desc {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 20pt;
	bottom: 20px;
    position: absolute;
    width: 100%;
}



/* HEADERS */

span.keyhead {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 40pt;
	text-align: center;
	margin-bottom: 40px;
	display: block;
}

h1.contactheader {
	font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 22pt;
    margin: 20px 0 0 0;
	width: 200px;
}

h1.keyheader {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 40pt;
}

h2.smallheader {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 16pt;
	margin: 20px 0 0 0;
}

h2.prodheader {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26pt;
}

h3.prodheader {
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    font-size: 16pt;
	margin: 20px 0 0 0;
}

h3.features {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 22pt;
    margin: 20px 0 0 0;
}

.sidepad {
    padding: 0 30px 0 30px;
}

#topbar {
	background-color: #495057;
    width: 100%;
    height: 25px;
	color: #fff;
	z-index: 10;
}

/* NAV STYLING */

#logo {
    /*width: 300px;
    height: 50px;*/
    background-image: url(/images/logo.png);
    background-repeat: no-repeat;
    margin: auto;
    background-size: contain;
}


.navbar {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    font-weight: 400;
	padding: .2rem 1rem;
	z-index: 10;
    /*background-image: url(http://www.totallockers.co.uk/images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 30px;*/
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff !important;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

/* 16:9 image */

.img-wide {
	width: 320px;
    height: 180px;
}

.img-wide-text {
	font-family: 'Raleway', sans-serif;
    line-height: 16px;
    font-size: 14px;
    font-weight: 400;
    width: 320px;
}

/* TESTIMONIAL SLIDER */

.carousel .item {
	color: #999;
	overflow: hidden;
    min-height: 120px;
	font-size: 13px;
}
.carousel .media {
	position: relative;
	padding: 0 0 0 20px;
	margin-left: 20px;
}
.carousel .media img {
	width: 75px;
	height: 75px;
	display: block;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}
.carousel .testimonial {
    color: #fff;
    position: relative;    
    background: cadetblue;
	padding: 15px;
	margin: 0 0 20px 20px;
}
.carousel .testimonial::before, .carousel .testimonial::after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: -20px;
}
.carousel .testimonial::before {
    width: 20px;
    height: 20px;
	background: #9b9b9b;
	box-shadow: inset 12px 0 13px rgba(0,0,0,0.5);
}
.carousel .testimonial::after {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    border-left-color: #fff;
}
.carousel .item .row > div:first-child .testimonial {
	margin: 0 20px 20px 0;
}
.carousel .item .row > div:first-child .media {
	margin-left: 0;
}
.carousel .testimonial p {
	text-indent: 40px;
    line-height: 21px;
	margin: 0;
}
.carousel .testimonial p::before {
	content: '\94';
    color: #fff;
    font-weight: bold;
    font-size: 68px;
    line-height: 70px;
    position: absolute;
    left: -25px;
    top: 0;
}
.carousel .overview {
	padding: 3px 0 0 15px;
}
.carousel .overview .details {
	padding: 5px 0 8px;
}
.carousel .overview b {
	text-transform: uppercase;
	color: #ff5555;
}

.star-rating li {
	padding: 0 2px;
}
.star-rating i {
	font-size: 14px;
	color: #ffdc12;
}

.carousel-indicators.shade li {
    background-color: #eee;
}

.carousel-indicators.shade li .active {
    background-color: green;
}

/* END TESTIMONIAL SLIDER */

/* SPEC TABLES */

.fullhigh {
	height: 300px;
}

.sixthhigh {
	height: 15%;
}

.fifthhigh {
	height: 20%;
}

h5.spectable {
    font-weight: 600;
    font-size: 14pt;
}

.spectable {
	font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 12pt;
}

.spectable.h5 {
	color: green;
}

/* END SPEC TABLES */

/* BANNERS */

#wet-banner {
	background-image: url(/images/placeholder.jpg);
	width: 100%;
    height: 500px;
	background-size: cover;
    background-repeat: no-repeat;
}

#dry-banner {
	background-image: url(/images/banners/banner-dry.jpg);
	width: 100%;
    height: 500px;
	background-size: cover;
    background-repeat: no-repeat;
}

#robust-banner {
	background-image: url(/images/banners/banner-robust.jpg);
	width: 100%;
    height: 500px;
	background-size: cover;
    background-repeat: no-repeat;
}

/* END BANNERS */	

@media only screen and (max-width: 500px) {
	
	.darkbox {
	width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
	
	.underline-mobile {
		border-bottom: 1px solid hsla(210, 10%, 50%, 1);
	}

	.carousel-slogan {
		font-size: 14pt;
	}

	.carousel-desc {
		display: none;
	}

	.carousel-caption {
		top: 0px;
	}

	span.sidepad {
		width: 40%;
		padding: 0 5px 0 5px;
	}

	nav.navbar.navbar-expand-md.navbar-dark.bg-dark {
		display: flex;
		position: static;
		width: 100vw;
	}

	#topbar {
		padding-right: 50px;
		display: none;
	}

	#logo {
		width: 200px;
		height: 50px;
	}

	/* CONTRACT FORM */

	textarea.form-control {
		height: auto;
		width: 100%
	}

	.form-control {
		height: auto;
		width: 100%;	
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
		color: #777;
		margin: 0;
		max-width: 100%;
		display: block;
		margin-bottom: 6px;
		background: #fff;
	}
	
		.carousel-indicators {
		bottom: 0px !important;
	}
	
	
	/* MOBILE FIXES */
	
	.engbanner {
		font-size: 40px;
	}
	
	img.featurette-image {
		width: 340px !important;
	}
	
	.mobilefit {
		height: fit-content;
		width: fit-content
	}
	
	.mobilethirty {
		width: 30%;
	}
	
	.mobilefourty {
		width: 40%;
	}
	
	.mobilefifty {
		width: 50%;
	}
	
		ul.acc {
		display: none !important;
	}	
	
}

@media only screen and (max-width: 700px) {

	li.accli {
		width: 100px;
	}
	
	.section-content {
		width: 350px;
	}
	
}

@media only screen and (min-width: 501px) {
		
	.carousel-head {
		font-size: 36pt;
	}

	#logo {
		width: 300px;
		height: 80px;
		position: absolute;
		bottom: -25px;
	}
	
	.third {
		width: 33%;
	}

}

.g-recaptcha {
	width: 50%
}

fieldset {
    padding: 0 0;
    margin: 0 0;
    border: none;
}

/* ACCORDION */

#onedoor {
    /* background-image: url(/images/locker-placeholder.png); */
    background-repeat: no-repeat;
    background-size: contain;
	display: block;
	height: 100%;
	max-width: 100px;
	padding: 0px;
    margin: auto;
}

#twodoor {
    background-repeat: no-repeat;
    background-size: contain;
	display: block;
	height: 100%;
	max-width: 100px;
	padding: 0px;
    margin: auto;
}

#threedoor {
    background-repeat: no-repeat;
    background-size: contain;
	display: block;
	height: 100%;
	max-width: 100px;
	padding: 0px;
    margin: auto;
}

#fourdoor {
    background-repeat: no-repeat;
    background-size: contain;
	display: block;
	height: 100%;
	max-width: 100px;
	padding: 0px;
    margin: auto;
}

#fivedoor {
    background-repeat: no-repeat;
    background-size: contain;
	display: block;
	height: 100%;
	max-width: 100px;
	padding: 0px;
    margin: auto;
}

.accdoors {
	width: 100px;
	display: inline-grid;
	border: 2px outset hsla(0, 0%, 30%, 1);	
}

.ichidoors {
	height: 100%;
	background-color: #8b8279;
	/*background-image: url(../images/textures/grain.jpg);
    background-blend-mode: luminosity;*/
}

.nidoors {
	height: 50%;
	background-color: crimson;
}

.sandoors {
	height: 33.3%;
	background-color: #594c41;
	/*background-image: url(../images/textures/wood.jpg);
    background-blend-mode: luminosity;*/
}

.yondoors {
	height: 25%;
	background-color: #8b8279;
}

.godoors {
	height: 20%;
	background-color: crimson;
}

#lockicon {
	width: 10px;
	height: 80%;
	margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
	background-image: url(../images/locks/lock-50.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


//variables
$slider-height: 500px;
$text-block-width: 400px;

$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;

//transitions and mixins

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;

}

/* Accordion Style */

.accordion {
    background-color: #495057;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	text-shadow: none;
}

.active, .accordion:hover {
    /*background-color: #343a40; */
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

/* End accordion Style */