@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
* {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

.page-footer {
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

#footer-container {
    background-color: #222;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#footer-container .container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto;
}

#footer-container .container div {
    flex-grow: 1;
    margin: 0 auto;
    max-width: 33%;
    min-width: 320px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 1239px) {
    #footer-container .container div {
        max-width: 50%;
    }
}

@media screen and (max-width: 450px) {
    #footer-container .container div {
        max-width: 100%;
    }
}

#footer-container .container div h3 {
    color: white;
    margin-top: 20px;
    font-size: 150%;
    font-weight: 400;
}

#footer-container .container div hr {
    margin-top: 0 !important;
}

#footer-container .container #about-us img {
    width: 180px;
}

#footer-container .container #about-us p {
    color: white;
}

#footer-container .container #about-us button {
    border-radius: 5px;
}

#footer-container .container #links a {
    color: white;
}

#footer-container .container #links a:hover {
    color: white;
}

#footer-container .container #links ul:last-child {
    margin-bottom: 0;
}

#footer-container .container #contact-us div {
    background-image: url("/media/wysiwyg/Footer/world-map.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0;
    padding: 0;
    color: white;
}

#footer-container .container #contact-us div strong {
    font-size: 125%;
    font-weight: 400;
}

#footer-container .container #contact-us div p {
    padding-top: 5px;
    padding-left: 20px;
}

#footer-container .container #contact-us div p a {
    color: white;
}

#footer-container .container #contact-us div p a:hover {
    color: white;
}

#footer-container #social {
    padding-bottom: 20px;
    text-align: center;
}

#footer-container #social a {
    color: white;
}

#footer-container #social img {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

#copyright {
	background-color: black;
	color: white;
	font-size: 90%;
	text-align: center;
	padding: 5px 20px;
}

#news-slider > .slick-prev {
    background: none !important;
}

#news-slider > .slick-next {
    background: none !important;
}

#case-study-slider > .slick-prev {
    background: none !important;
}

#case-study-slider > .slick-next {
    background: none !important;
}

.slider-strip img {
    margin: 0 auto;
    max-width: 300px;
    object-fit: contain;
}

.slider-strip .container #news-slider .slide div {
	padding: 10px 10px 20px 10px;
}

.slider-strip .container #case-study-slider .slide div {
    padding: 10px 10px 20px 10px;
}

.slider-strip .container #case-study-slider .slide div .box-image-container, .slider-strip .container #news-slider .slide div .box-image-container {
	margin: 0 auto;
	padding-bottom: 5px;
}

#news-slider span, #case-study-slider span {
	color: white;
	font-weight: bold;
	background: #888;
	border-radius: 20px;
	padding: 5px 10px;
}

.slick-track > div > div {
	padding: 10px 10px 20px 10px;
}

.box-image-container {
	margin: 0 auto;
	padding-bottom: 5px !important;
}

.slider-strip small {
	padding: 5px 0;
}

#news-slider p, #case-study-slider p {
	padding: 20px 20px 30px 20px;
	text-align: left;
    margin: 0;
}

.slick-dots li button::before {
	font-family: slick;
	font-size: 35px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	content: '•';
	text-align: center;
	opacity: .25;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* THE SERVICES BLOCK */
#services #mediaspec{padding-top:40px;text-align:center}#services #mediaspec img{margin:0 auto;width:200px}#services #mediaspec p{font-weight:700;margin:0 auto;max-width:900px;padding-bottom:40px;padding-left:20px;padding-right:20px}@media (max-width:700px){#services #mediaspec{font-size:90%}}#services #services-flex{display:flex;flex-direction:row;justify-content:space-evenly}#services #services-flex .flex-item{flex:1;padding-bottom:40px;width:25%}#services #services-flex .flex-item>div{box-shadow:5px 5px 15px 5px rgba(0,0,0,.5);height:285px;margin:0 auto;overflow:hidden;width:285px}#services #services-flex .flex-item #services-products h1{text-decoration: none;color:#fff;padding-top:120px;z-index:100}#services #services-flex .flex-item #services-products>div{height:285px;width:285px;background-image:url("https://www.mediaspec.co.uk/media/homepage/products.jpg");background-size:cover;transition:.1s}#services #services-flex .flex-item #services-products>div:hover{transform:scale(1.2);transition:.1s}#services #services-flex .flex-item #services-products>div>div{background-color:rgba(0,0,0,0);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-products>div>div:hover{background-color:rgba(0,0,0,.7);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-installations h1{color:#fff;padding-top:120px;z-index:100}#services #services-flex .flex-item #services-installations>div{height:285px;width:285px;background-image:url("https://www.mediaspec.co.uk/media/homepage/installations.jpg");background-size:cover;transition:.1s}#services #services-flex .flex-item #services-installations>div:hover{transform:scale(1.2);transition:.1s}#services #services-flex .flex-item #services-installations>div>div{background-color:rgba(0,0,0,0);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-installations>div>div:hover{background-color:rgba(0,0,0,.7);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-training h1{color:#fff;padding-top:120px;z-index:100}#services #services-flex .flex-item #services-training>div{height:285px;width:285px;background-image:url("https://www.mediaspec.co.uk/media/homepage/training.jpg");background-size:cover;transition:.1s}#services #services-flex .flex-item #services-training>div:hover{transform:scale(1.2);transition:.1s}#services #services-flex .flex-item #services-training>div>div{background-color:rgba(0,0,0,0);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-training>div>div:hover{background-color:rgba(0,10,0,.7);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-support h1{color:#fff;padding-top:120px;z-index:100}#services #services-flex .flex-item #services-support>div{height:285px;width:285px;background-image:url("https://www.mediaspec.co.uk/media/homepage/support.jpg");background-size:cover;transition:.1s}#services #services-flex .flex-item #services-support>div:hover{transform:scale(1.2);transition:.1s}#services #services-flex .flex-item #services-support>div>div{background-color:rgba(0,0,0,0);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item #services-support>div>div:hover{background-color:rgba(0,10,0,.7);height:285px;text-align:center;width:285px;transition:.1s}#services #services-flex .flex-item:first-child{border-bottom:2px solid #6495df}#services #services-flex .flex-item:nth-child(2){border-bottom:2px solid #ff4b2c}#services #services-flex .flex-item:nth-child(3){border-bottom:2px solid #ffb636}#services #services-flex .flex-item:nth-child(4){border-bottom:2px solid #16a859}@media (max-width:1200px){#services #services-flex{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}#services #services-flex .flex-item{flex:1;padding-bottom:40px;min-width:50%}#services #services-flex .flex-item #services-products,#services #services-flex .flex-item #services-training{float:right;margin-right:20px}#services #services-flex .flex-item #services-products>div>div,#services #services-flex .flex-item #services-training>div>div{background-color:rgba(0,0,0,.25)}#services #services-flex .flex-item #services-installations,#services #services-flex .flex-item #services-support{float:left;margin-left:20px}#services #services-flex .flex-item #services-installations>div>div,#services #services-flex .flex-item #services-support>div>div{background-color:rgba(0,0,0,.25)}#services #services-flex .flex-item #services-products{border-bottom:3px solid #6495df}#services #services-flex .flex-item #services-training{border-bottom:3px solid #ff4b2c}#services #services-flex .flex-item #services-installations{border-bottom:3px solid #ffb636}#services #services-flex .flex-item #services-support{border-bottom:3px solid #16a859}#services #services-flex .flex-item:first-child{border-bottom:none;float:right}#services #services-flex .flex-item:nth-child(2){border-bottom:none}#services #services-flex .flex-item:nth-child(3){border-bottom:2px none}#services #services-flex .flex-item:nth-child(4){border-bottom:2px none}}@media (max-width:700px){#services #services-flex .flex-item div{max-height:150px;max-width:150px}#services #services-flex .flex-item #services-installations,#services #services-flex .flex-item #services-support{margin-left:10px}#services #services-flex .flex-item #services-installations h1,#services #services-flex .flex-item #services-support h1{font-size:22px;padding-top:50px}#services #services-flex .flex-item #services-products,#services #services-flex .flex-item #services-training{margin-right:10px}#services #services-flex .flex-item #services-products h1,#services #services-flex .flex-item #services-training h1{font-size:22px;padding-top:50px}}

.nav-sections {
    margin-bottom: 0 !important;
}

.page-title {
	background: #111;
	color: white;
	text-align: center;
	padding: 2rem 1rem;
}

.page-title h1 {
    margin: 0 !important;
}

#contact-strip {
	background-color: #222;
	position: sticky;
	top: 0;
    margin-bottom: 25px;
}

#contact-strip > div {
	display: flex;
	flex-wrap: wrap;
	padding: 3px 0;
    max-width: 1140px;
    margin: 0 auto;
}

#contact-strip > div div {
	flex-grow: 1;
	margin: 0 auto;
	max-width: 33%;
	min-width: 200px;
	padding: 5px;
	text-align: center;
}

#contact-strip > div div a {
    color: white;
    font-weight: bold;
}