/* FONTS */

@font-face {
    font-family: 'effra_light';
    src: url('../fonts/effra_std_lt-webfont.woff2') format('woff2'),
         url('../fonts/effra_std_lt-webfont.woff') format('woff'),
         url('../fonts/effra_std_lt-webfont.svg#effra_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effraregular';
    src: url('../fonts/effra_std_rg-webfont.woff2') format('woff2'),
         url('../fonts/effra_std_rg-webfont.woff') format('woff'),
         url('../fonts/effra_std_rg-webfont.svg#effraregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effrabold';
    src: url('../fonts/effra_std_bd-webfont.woff2') format('woff2'),
         url('../fonts/effra_std_bd-webfont.woff') format('woff'),
         url('../fonts/effra_std_bd-webfont.svg#effrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* SCROLL BARS */

body::-webkit-scrollbar {
  	width: 6px;
}
 
body::-webkit-scrollbar-track {
  	background:rgba(0, 0, 0, 0.1);
	
}
 
body::-webkit-scrollbar-thumb {
  	background: #000;
	border-radius: 20px;
}

/* STRUCTURE */

html {
	overflow-x:hidden;
}

body {
	margin:0;
	padding:0;
	font-size:1.25rem;
	font-family: 'effra_light';
	overflow-x:hidden;
}

strong {
	font-family: 'effrabold';
}

section a {
	font-family: 'effrabold';
	color:#000;
}

header, section, main, footer {
	width:100%;
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	position:relative;
}

header {
	width:90%;
	padding:20px 5%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	z-index:20;
}

header h1 {
	margin:0;
	padding:0;
}

header h1 a {
	width: 250px;
	height:60px;
	background:url("../images/spick-and-span-logo.jpg") center center no-repeat;
	background-size:contain;
	text-indent:-9999px;
	display: block;
}

header ul {
	list-style-type:none;
}

header ul li a {
	color:#000;
	text-transform: uppercase;
	font-family: 'effraregular';
	text-decoration: none;
}

ul.navigation {
    margin: 0;
    padding: 0;
    display: flex;
}

ul.navigation li {
	position:relative;
}

ul.navigation li a {
	display: block;
	padding:15px 25px;
}

ul.sub-nav {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 40px;
    left:25px;
}

ul.navigation li:hover > ul.sub-nav {
	display: block;
}

ul.sub-nav li a {
	padding:10px 25px;
	background:#000;
	color:#FFF;
	border-bottom:1px solid #ccc;
}

ul.sub-nav li a:hover {
	background: #333;
}

section.hero {
	height: 50vh;
	background:#F8F8F8;
	overflow: hidden;
}

ul.hero-slider {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
    height: 100%;
}

ul.hero-slider li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
	position:relative;
}

ul.hero-slider .hero-image {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
}

ul.hero-slider .hero-image img {
	width:100%;
	height:100%;
	object-fit: cover;
}

ul.hero-slider li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.slider-content {
    background: rgba(0,0,0,0.7);
    padding: 20px 25px;
    color: #FFF;
    margin-left: 5%;
    width: 500px;
    height: fit-content;
    z-index: 10;
    top: 50%;
    transform: translate(0, -50%);
    position: relative;
    position: absolute;
}

button#send-message {
    background: #000;
    color: #FFF;
    border: none;
    padding: 15px;
	font-family: 'effraregular';
}

section.environment-band {
	background:#000;
	width:80%;
	padding:20px 10% 150px 10%;
}

ul.company-band {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul.company-band li {
    display: flex;
	justify-content: center;
	align-items: center;
    color: #FFF;
    font-size: 2rem;
	width:30%;
}

ul.company-band li a {
    background: #99C389;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'effrabold';
    padding: 20px 30px;
    display: block;
    font-size: 1rem;
    width: 100%;
    text-align: center;
}

ul.company-band li .service-text span {
	font-family: 'effrabold';
	display: block;
}

.company-icon {
    width: 110px;
    height: 110px;
	margin:0 25px 0 0;
}

.company-icon.enviro {
    width: 90px;
    height: 90px;
}

section.services {
	width:80%;
	padding:0 10%;
}

ul.service-boxes {
    list-style-type: none;
    margin: -125px 0 0 0;
    padding: 0;
    display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

ul.service-boxes li {
    width: 30%;
}

ul.service-boxes.dry-cleaning-boxes li {
    width: 30%;
	margin:30px 0;
}

ul.service-boxes li a {
	text-decoration: none;
	color:inherit;
}

ul.service-boxes li .image {
	width:100%;
	height:220px;
	background:#CCC;
}

ul.service-boxes li .image img {
	width:100%;
	height:100%;
	object-fit: cover;
}

ul.service-boxes li .service-title {
	background:#000;
	color:#FFF;
	padding:15px 0;
	text-align: center;
	font-size:1.25rem;
	font-family: 'effrabold';
	text-transform: uppercase
}

ul.service-boxes li.dry-cleaning .service-title {
	border-top:5px solid #99C389;
}

ul.service-boxes li.linen-hire .service-title {
	border-top:5px solid #89BAC3;
}

ul.service-boxes li.workwear .service-title {
	border-top:5px solid #BC89C3;
}

section.company {
    width: 80%;
    padding: 50px 10%;
	background:#F7F7F7;
}

ul.company-services {
	list-style-type:none;
	display: flex;
	margin:0;
	padding:0;
	justify-content: space-between;
	
}

ul.company-services li {
    width: 20%;
    text-align: center;
	font-family: 'effrabold';
}

ul.company-services li .icon {
	width:100%;
	height:150px;
	margin:0 0 20px 0;
}

ul.company-services li .icon img {
	width:100%;
	height:100%;
	object-fit: contain;
}

section.black-band {
	background:#000;
	width:80%;
	padding:20px 10%;
	color:#FFF;
	text-align: center;
	font-family: 'effrabold';
	font-size:1.5rem;
}

h3 {
    font-size: 1.5rem;
}

section.block-text-image {
    flex-direction: row;
    align-items: normal;
}

section.block-text-image.reverse {
    flex-direction: row-reverse;
}

.text-block {
    width: 40%;
    display: block;
    flex-direction: column;
    padding: 50px 5%;
}

.text-block h3 {
	font-family: 'effrabold';
}

.image-block {
    width:50%;
    font-size: 0;
	position:relative;
}

.image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

section.cta {
    width: 80%;
    padding: 20px 10%;
    background: #000;
    color: #FFF;
    justify-content: center;
    text-align: center;
    font-size: 2.5rem;
}

section.cta a {
	color:inherit;
	text-decoration: none;
}

footer {
    background: #272727;
    color: #FFF;
    width: 80%;
    padding: 50px 10%;
    text-align: center;
}

ul.social {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

ul.social li a {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    display: block;
    text-indent: -9999px;
}

p.legal a {
	margin:0 10px;
	color:#FFF;
	text-decoration: none;
}

ul.social li a.ins {
	background:url("../images/instagram-icon.svg") center center no-repeat;
	background-size:contain;
}

ul.social li a.fb {
	background:url("../images/facebook-icon.svg") center center no-repeat;
	background-size:contain;
}

ul.social li a.ln {
	background:url("../images/linkedin-icon.svg") center center no-repeat;
	background-size:contain;
}

ul.offers-boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul.offers-boxes li {
    width: 30%;
    background: #000;
    color: #FFF;
    margin: 30px 0;
    border-top: 20px solid red;
}

ul.offers-boxes li.green {
	border-top:20px solid #99C389;
}

ul.offers-boxes li.teal {
	border-top:20px solid #89BAC3;
}

ul.offers-boxes li.lilac {
	border-top:20px solid #BC89C3;
}

.offer-content {
	width:90%;
	padding:35px 5%;
	text-align: center;
}

.offer-content strong {
	font-family: 'effrabold';
	text-transform: uppercase;
}

.mobile-menu-icon {
	display: none;
	visibility: hidden;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.form-field {
    display: flex;
    width: 90%;
    padding: 20px 5%;
    margin: 10px 0px;
	background:#F7F7F7;
	border:1px solid #707070;
	border-radius:10px;
    font-family: 'effraregular';
	font-size:1.25rem;
}

.field {
    width: 100%;
}

.label {
    width: 100%;
}

.form-send {
	margin: 10px 0 0 0;
	border-radius:10px;
	font-family: 'effra_light';
	color:#FFF;
	width:fit-content;
	padding: 20px 5%;
	background:#000;
	align-items: flex-end;
	font-size:1.25rem;
}

textarea.form-field {
    height: 100px;
}