/*
	Theme Name: UL Cable & Wire
	Theme URI: http://www.peterhintondesign.co.uk
	Description: Tailored WordPress Theme
	Version: 1.0
	Author: Peter Hinton (@peterhinton)
	Author URI: http://www.peterhintondesign.co.uk
	Tags: HTML5, CSS3
*/

/*------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}

body{margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: #000;}
h1{font-size: 40px; font-weight: 600; color: #ce2a31; line-height: normal; margin: 20px auto;}
h2{font-size: 32px; font-weight: 600; line-height: 30px; padding-bottom: 22px;}
h3{font-size: 26px; font-weight: 600; line-height: 34px; padding-bottom: 12px;}

b, strong{font-weight: 800;}
a{text-decoration: none; color: #ce2a31;}
p{padding: 0 0 25px 0;}
img{display: block; max-width: 100%;}
em, i{font-style: italic;}
b, strong{font-weight: 700;}
ul{margin: 0 auto 10px auto; padding: 0;}
ul li{list-style: disc; margin: 0 0 16px 16px; list-style-position: inside; list-style: circle;}
ol{margin: 10px auto; padding: 0 0 0 15px;}
ol li{list-style: decimal; margin: 0 0 16px 16px; list-style-position: inside;}
ol ol li{list-style-type: lower-roman;}

input, select, button{font-size: 16px; font-family: 'Montserrat', sans-serif; display: inline-block; width: 100%; padding: 14px 15px; margin: 3px auto; box-sizing: border-box; border-radius: 0px; border-bottom-left-radius: 0; max-width: none; border: 1px solid #8a8b8a; background: #e4e4e3;}
textarea{font-size: 16px; font-family: 'Montserrat', sans-serif;  display: inline-block; width: 100%; height: 110px; box-sizing: border-box; padding: 14px 15px; margin: 3px auto; border-radius: 0px; max-width: none; border: none;}
input[type="submit"], button{transition: all 0.2s ease-out 0s; font-family: 'Montserrat', sans-serif; display: inline-block; cursor: pointer; width: auto; max-width: 200px; background: #ce2a31 !important; color: #fff; padding: 12px 26px; border-radius: 0px; border: none; text-transform: uppercase; text-align: center; margin: 10px auto !important; line-height: normal !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;}
input[type="submit"]:hover, button:hover{background: #333333 !important; color: #fff;}
input[type="checkbox"]{border-radius: 50%; background: #e4e4e3; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; box-sizing: border-box; padding: 10px; width: 40px; height: 40px; display: inline-block; vertical-align: middle;}
input[type="checkbox"]:checked{background: url(images/icon-tick.svg) center no-repeat #ce2a31; background-size: contain; border: none;}

#logo{display: block; width: 330px; height: 150px; overflow: hidden; position: fixed; top: 0; left: 50%; z-index: 110; padding: 0px; box-sizing: border-box; transform: translateX(-50%); background: url(images/ul-wire-cable.svg) center no-repeat #fff; background-size: 80%; transition: all 0.25s linear 0s; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-box-shadow: 2px 5px 20px 5px rgba(0,0,0,0.36); box-shadow: 2px 5px 20px 5px rgba(0,0,0,0.36);}
#logo.scrolled{width: 220px; height: 100px; padding: 5px 20px;}
#header{display: block; width: 100%; height: auto; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 90;}
/*
#header .header-strip{display: block; width: 100%; height: 10px; transition: all 0.25s linear 0s;}
#header .header-contact{display: flex; width: 100%; height: 70px; line-height: 70px; color: #fff; transition: all 0.25s linear 0s; font-size: 22px; background: rgba(0,0,0,0.8);}
#header .header-contact-icon{display: block; width: 50px; height: 50px; display: inline-block; vertical-align: middle; transition: all 0.25s linear 0s;}
*/
#header .header-strip{display: block; width: 100%; height: 2px; transition: all 0.25s linear 0s;}
#header .header-contact{display: flex; width: 100%; height: 48px; line-height: 48px; color: #fff; transition: all 0.25s linear 0s; font-size: 16px; background: rgba(0,0,0,0.8);}
#header .header-contact-icon{display: block; width: 30px; height: 30px; display: inline-block; vertical-align: middle; transition: all 0.25s linear 0s;}
#header .header-email{margin-right: 7px;}
#header .header-phone{margin-left: 7px;}
#header .header-text{transition: all 0.25s linear 0s;}
#header .header-contact a{color: #fff;}
#header .col-02,
	#header .col-container{margin: 0; padding: 0;}
/*
#header.scrolled .header-strip{height: 2px;}
#header.scrolled .header-contact{height: 48px; line-height: 48px; font-size: 16px;}
#header.scrolled .header-contact-icon{width: 30px; height: 30px;}
*/
#modal{display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80;}

#hero .table{max-height: 700px; min-height: 550px; width: 100%; height: 80vh; color: #fff;}
#hero .table-cell{background: rgba(0,0,0,0.3);}
#hero h1{color: #fff; font-size: 80px; line-height: 98px; margin-top: 30px; font-family: 'Oswald', sans-serif;}
#hero p{font-size: 30px;}

#callout-strip{display: block; padding: 20px 0; box-sizing: border-box; font-size: 16px; line-height: 22px;}
#callout-strip .col-container{margin: 0; padding: 0; align-items: center;}
#callout-strip .col-04{display: block; margin: 0px; font-size: 15px;}
#callout-strip .callout-strip-text{width: calc(100% - 70px);}
#callout-strip .callout-strip-icon{width: 50px;}
#callout-strip .callout-strip-icon,
	#callout-strip .callout-strip-text{display: inline-block; vertical-align: middle; margin: 0 3px 0 0;}
#footer p{margin: 0; padding: 0;}

.popup{display: none; border: 0; width: 90%; max-width: 700px; height: 80vh; max-height: 600px; transform: translate(-50%, -50%); overflow: scroll; background: #fff; box-shadow: 0px 19px 84px 0px rgba(0,0,0,0.75); position: fixed; top: 50%; left: 50%; z-index: 992; box-sizing: border-box;}
.popup.active{display: block;}
.popup .sector-image{margin: 0;}
.popup .col-container{justify-content: space-between;}

.partner-link{display: block; width: 100%; height: auto; margin: 0 0 5px 0; cursor: pointer; box-sizing: border-box; overflow: hidden;}
.partner-link .partner-image{display: table; width: 101%; height: 100px; margin: 0;}
.partner-link .partner-image .table-cell{background: rgba(0,0,0,0.5); text-align: center; color: #fff; transition: all 0.25s linear 0s;}
.partner-link .partner-image-icon{display: block; width: 40px; height: 40px; background: none; background: url(images/icon-down-white.svg) center no-repeat; background-size: contain; overflow: hidden; margin: 0 auto; transition: all 0.25s linear 0s; transform: rotate(180deg);}
.partner-link .partner-bottom{display: block; padding: 10px 20px; box-sizing: border-box; color: #fff !important; transition: all 0.25s linear 0s;}
.partner-link:hover .partner-bottom{background: #000;}
.partner-link:hover .table-cell{opacity: 0;}
.partner-link:hover .partner-image-icon{opacity: 0.5;}

.btn-popup{color: #000; font-weight: 600;}
.btn-popup:hover{color: #ce2a31;}
.btn-popup:hover .table-cell{background: rgba(0,0,0,0);}
.sector-image{display: table; width: 100%; height: 240px; margin: 0 0 5px 0; cursor: pointer;}
.sector-image-icon{display: block; width: 60px; height: 60px; background: url(images/icon-pdf.png) center no-repeat; background-size: contain; border-radius: 50%; overflow: hidden; margin: 0 auto 5px auto;}
.sector-image .table-cell{background: rgba(0,0,0,0.5); text-align: center; color: #fff; transition: all 0.25s linear 0s;}
.sector-form-icon{display: block; width: 90px; height: 90px; background: url(images/icon-pdf.png) center no-repeat #ce2a31; background-size: contain; border-radius: 50%; overflow: hidden; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);}
.sector-form-header{padding: 60px 20px 50px 20px; box-sizing: border-box;}
.sector-form-header h2{margin: 0; padding: 0;}
.sector-form{display: block; padding: 30px;}

#footer{font-size: 16px;}
#footer a{font-weight: 700;}
#footer .col-container{justify-content: space-between;}
#footer-logo{max-width: 50%;}
.footer-small{font-size: 14px; line-height: normal;}

.align-right{float: right;}
.bg-grey{background: #e4e4e3;}
.bg-black{background: #000; color: #fff;}
.bg-black a{color: #fff;}
.bg-black a:hover{color: #ce2a31;}
.bg-green{background: #34a440; color: #fff;}
.bg-green a{color: #fff;}
.bg-green a:hover{color: #000;}
.bg-red{background: #ce2a31; color: #fff;}
.bg-red a{color: #fff;}
.bg-red a:hover{color: #000;}
.btn-box{display: inline-block; padding: 10px 25px; border-radius: 30px; text-align: center; line-height: normal; opacity: 1 !important; text-decoration: none; color: #fff; background: #ce2a31; text-align: center; margin: 15px auto 0 auto;}
.btn-box:hover{background: #000;}
.btn-popup-close{display: block; width: 50px; height: 50px; background: url(images/icon-close.svg) center no-repeat #ce2a31; background-size: contain; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 1; text-indent: -9999px;}
.btn-down{display: block; width: 40px; height: 40px; background: url(images/icon-down-red.svg) center no-repeat; background-size: contain; overflow: hidden; text-indent: -9999px; margin: 20px auto 0 auto;}
.clear{clear:both; font-size:0px; width:0px; line-height:0px; height:0px; display: block; overflow: hidden;}
.content{width: 90%; max-width: 1240px; display: block; margin: 0 auto;}
.content-center{max-width: 800px; margin: 0 auto;}
.content-padding{padding: 100px 0;}
.col-container{width: 100%; display: flex; justify-content: center; flex-wrap: wrap; margin: 20px auto;}
.col-centered{justify-content: center;}
.col-02{width: calc(50% - 10px); margin: 0 0 30px 0;}
.col-03{width: 28%; margin: 0 auto 40px auto;}
.col-04{width: 24%; margin: 0 auto 40px auto;}
.col-05{width: 19%; margin: 0 5px 40px 5px;}
.col-08{width: calc(12% - 20px); margin: 10px;}
.col-08.brand-logo{/*box-sizing: border-box; padding: 5px 10px;*/}
.contact-callout{margin: 50px auto; font-size: 30px; font-weight: 700;}
.contact-callout-section{display: block; padding: 20px 40px; box-sizing: border-box;}
.contact-callout-inline{display: inline-block; vertical-align: middle; margin: 0 5px 0 0;}
.cta-box{padding: 40px; box-sizing: border-box;}
.cta-box p{padding: 0; margin: 0;}
.header-icon img{margin: 0 auto 16px auto; width: 80px;}
.padding-top{padding-top: 20px;}
.no-padding{padding: 0;}
.relative{position: relative;}
.section{display: block; width: 100%; padding: 80px 0}
.table{display: table; width: 100%; height: 100%; vertical-align: middle; position: relative;}
.table-cell{display: table-cell; width: 100%; height: 100%; min-width: 100%; min-height: 100%; vertical-align: middle; position: relative;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-red{color: #ce2a31;}
.text-small{font-size: 13px; line-height: 22px;}

.wpcf7-form-control-wrap {position: relative; width: 100%; display: block; margin-bottom: 15px;}
.wpcf7-list-item{margin: 0 20px 0 0 !important;}



/* MOBILE */
@media screen and (min-width: 0px) and (max-width: 699px) {

	body,
		#hero p{font-size: 15px; line-height: 20px;}
	h1{font-size: 30px; padding: 0 0 20px 0;}
	h2{font-size: 20px; line-height: 26px;}

	#header .col-02{width: calc(50% - 20px);}
	#header .header-text{display: none;}
	#hero .table{min-height: inherit;}


	#logo{width: 190px; height: 86px;}
	#logo.scrolled{width: 140px; height: 64px;}

	#hero h1{font-size: 30px; line-height: 40px; }

	#callout-strip .col-04{width: 100%; margin: 20px auto; font-size: inherit;}

	#footer{text-align: center; font-size: inherit}
	#footer-logo{margin: 0px auto;}
	#footer .text-right{text-align: center;}

	.col-02{width: 100%; margin: 0 auto 20px auto;}
		.col-03,
		.col-04,
		.col-05{width: 45%; margin: 20px auto;}
	.col-08{width: 30%; margin: 0 auto 20px auto;}
	.contact-callout{font-size: 18px;}
	.align-right{float: none;}
	.section{padding: 50px 0}
	.sector-image{height: 160px;}

}