/*
Theme Name: Safety Compliance Matters
Theme URI: http://www.safetycompliancematters.co.uk
Author: CD Web Design
Author URI: http://www.cd-web-design.co.uk/
Description: Theme designed by CD Web Design for Safety Compliance Matters, Dec 2017
Version: 1
*/

html, body {margin:0; padding:0; width:100%; text-align:left;}
html {background:#fff; min-width:320px;}
body { font-family: 'Ubuntu', Helvetica, Arial, sans-serif; font-size:16px; margin:0; padding:0; color:#696969; }
p {margin:0; padding:5px 0px; color:#696969; line-height:1.6em;}
li {margin-top:4px;}
a img { border:0px;}
a, a:link, a:visited {text-decoration:none; margin:0; padding:5px 0px; color:#0063a7; }
a:hover {color:#696969; text-decoration:underline;}
h1 {font-size:22px; margin:0; padding:0; color:#696969; }
h2 {font-size:20px; margin:0; padding:0; color:#696969; font-weight:normal;}
h3 {font-size:18px; margin:0; padding:0; color:#696969; }
h4 {font-size:16px; margin:0; padding:0; color:#696969; font-weight:normal;}
h5 {font-size:14px; margin:0; padding:0; color:#696969; }
.clear {clear:both;}
.left, .nav-previous {float:left;}
.right, .nav-next {float:right;}
a.button {background:#0063a7; color:#fff; padding:12px 30px; text-transform:uppercase; display:inline-block; font-weight:bold; letter-spacing: 1px;} 
a.button:hover {background:#e8e8e8; color:#696969; text-decoration:none;}
:hover {-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
input {padding:5px; font-family: 'Ubuntu', Helvetica, Arial, sans-serif; border: 1px solid #e8e8e8;}
textarea {padding:5px; font-family: 'Ubuntu', Helvetica, Arial, sans-serif; border: 1px solid #e8e8e8;}
button, input[type=submit] {font-family: 'Ubuntu', Helvetica, Arial, sans-serif; border:0; background:#0063a7; color:#fff; padding:12px 30px; text-transform:uppercase; display:inline-block; font-weight:bold; letter-spacing: 1px;} 
button:hover, input[type=submit]:hover {background:#e8e8e8; color:#696969; text-decoration:none;}

.topbar {border-bottom: 1px solid #e8e8e8;}
.topbar .inner {width:1280px; margin:0 auto;}
.topbar .inner p {line-height:20px; padding:10px 0; text-transform:uppercase; font-size:14px;}
.topbar .inner p a {color:#696969;}
.topbar .inner p a:hover {text-decoration:underline;}
.topbar .inner p.right {padding:0;}
.topbar .inner p.right a.members {display:block; background:#e8e8e8; padding:10px 20px;}
.topbar .inner p.right a.members:hover {text-decoration:none; background:#0063a7; color:#fff;}

.header {border-bottom: 1px solid #e8e8e8;}
.header .inner {width:1280px; margin:10px auto;}
.header .inner .logo {float:left; width:180px; height:100px;}
.header .inner .logo a {width:180px; height:100px; padding:0; display:block;}
.header .inner .menu-button {display:none;} 
.header .inner div.menu {float:left;}
.header .inner div.menu > ul {list-style:none; padding:0; margin:0;}
.header .inner div.menu > ul > li {float:left; margin-top:0px; padding-left:20px; position:relative;}
.header .inner div.menu > ul > li > a {position:relative; line-height:40px; padding:30px 10px; font-size:16px; text-transform:uppercase; display:block; font-weight:bold;}
.header .inner div.menu > ul > li > a:hover {text-decoration:none; color:#0063a7;}
.header .inner div.menu > ul > li > a:after {position: absolute; content: ''; bottom: 20px; width: 0; height: 5px; background: #0063a7; left: 0; -webkit-transition: width .4s; -moz-transition: width .4s; -ms-transition: width .4s; -o-transition: width .4s; transition: width .4s; }
.header .inner div.menu > ul > li > a:hover:after, .header .inner div.menu > ul > li:hover > a:after{width:100%;}
.header .inner div.menu > ul > li > ul.sub-menu {display:none;}
.header .inner div.menu > ul > li:hover > ul.sub-menu {display:block; position:absolute; background:#0063a7; list-style:none; padding:0; margin:0; top:80px; z-index:9999;}
.header .inner div.menu > ul > li > ul.sub-menu > li {margin:0;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a {line-height:30px; padding:5px 10px; font-size:16px; text-transform:uppercase; display:block; font-weight:bold; width:330px; color:#fff;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a:hover {background:#fff; color:#0063a7; text-decoration:none;}

.banner {position:relative; overflow:hidden; width: 100%; height: 600px; display:block; margin-bottom:40px;}
.banner ul.homeslider {width: 100%; height: 600px !important; position: relative; overflow: hidden; margin: 0; padding:0;}
.banner ul.homeslider li.slide {margin-top:0; width:100%; height:600px; position: absolute; top:0; left:0; overflow: hidden; transition: all .3s ease .15s; opacity: 0; display:none;}
.banner ul.homeslider li.slide .bg {position:absolute; left:0; top:0; width:100%; height:100%; display:block; background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.banner ul.homeslider li.slide a.banner-link {display:block; position:absolute; z-index:98; top:0; left:0; width:100%; height:100%; padding:0;}
.banner ul.homeslider li.slide .v-align-center {position:absolute; z-index:99; display: table; height: 100%; width:640px; margin-left:-640px; left:50%; top:0;}
.banner ul.homeslider li.slide .v-align-center .cell {display: table-cell; vertical-align: middle; }
.banner ul.homeslider li.slide .v-align-center .cell .inner {padding:40px; background:rgba(0,99,167,0.8);}
.banner ul.homeslider li.slide.grey .v-align-center .cell .inner {background:rgba(105,105,105,0.8);}
.banner ul.homeslider li.slide.green .v-align-center .cell .inner {background:rgba(0,102,0,0.8);}
.banner ul.homeslider li.slide .v-align-center .cell h4 {color:#fff; font-weight:bold; font-size:14px; letter-spacing: 2px; margin-bottom:5px; text-transform:uppercase;}
.banner ul.homeslider li.slide .v-align-center .cell h1 {color:#fff; font-weight:bold; font-size:48px; text-transform:uppercase;}
.banner ul.homeslider li.slide .v-align-center .cell p {padding:10px 0; color:#fff;}
.banner ul.homeslider li.slide .v-align-center .cell a.button {background:none; color:#fff; text-transform:uppercase; font-weight:bold; letter-spacing: 1px; padding: 10px 20px; display: inline-block; border:2px solid #fff;}
.banner ul.homeslider li.slide .v-align-center .cell a.button:hover {background:#fff; color:#0063a7; text-decoration:none;}
.banner a.prev {padding:0; opacity: 1 !important; text-indent:-9999px; background: #01a7e1; width:40px; height:40px; position: absolute; bottom:20px; top: auto !important; left:50% !important; Margin-left: 540px; z-index: 999;}
.banner a.prev:after {content:''; display:block; position:absolute; z-index:12; left:0; top:0; width:40px; height:40px; background: url(/wp-content/themes/safetycompliancematters/images/xslider_skins.png) no-repeat 0px -80px; cursor: pointer;}
.banner a.next {padding:0; opacity: 1 !important; text-indent:-9999px; background: #01a7e1; width:40px; height:40px; position: absolute; bottom:20px; top: auto !important; left:50% !important; margin-left: 600px; z-index: 999;}
.banner a.next:after {content:''; display:block; position:absolute; z-index:12; left:0; top:0; width:40px; height:40px; background: url(/wp-content/themes/safetycompliancematters/images/xslider_skins.png) no-repeat -40px -80px; cursor: pointer;}

.intro {width:1280px; margin:0px auto;}
.intro h1 {font-size:24px; text-align:center; font-weight:normal;}
.intro h2 {font-size:32px; text-align:center; color: #0063a7;}
.intro p {padding:10px 160px; text-align:center;}
.intro p.button {padding:10px 0 0;}

.services {margin:40px 0; background:#e8e8e8; padding:0 0 40px;}
.services .inner {width:1280px; margin:0px auto;}
.services .inner ul {list-style:none; margin:0; padding:0;}
.services .inner ul li {position:relative; float:left; width:400px; height:250px; margin-right:40px; margin-top:40px;}
.services .inner ul li:nth-child(3n+0) {margin-right:0px;}
.services .inner ul li:nth-child(4n+0) {margin-left:220px;}
.services .inner ul li a {position:absolute; width:400px; height:250px; z-index:10; top:0; left:0; display:block; padding:0;}
.services .inner ul li img {position:absolute; width:400px; height:250px; top:0; left:0;}
.services .inner ul li .holder {width:100%; height:90px; position:relative; top:80px; text-align:center;}
.services .inner ul li .holder h1 {text-shadow: 1px 1px 3px #000; letter-spacing: 2px; color:#fff; display:inline-block; text-transform:uppercase; text-align:center; font-size:40px; padding:0 10px 10px; border-bottom:5px solid #0063a7;}
.services .inner ul li .holder p {text-shadow: 1px 1px 2px #000; color:#fff; padding:10px 0 0; text-align:center;}

.second {width:1280px; margin:0px auto;}
.second .left {width:620px;}
.second .left h2 {color: #0063a7;}
.second .right {width:540px;}
.second .test-box {padding:40px;}

.clients {width:1200px; margin:40px auto; padding:40px; background:#e8e8e8;}
.clients h2 {text-align:center; font-size:24px; font-weight:bold; padding-bottom:5px;}
.clients h4 {text-align:center; font-size:18px;}
.clients ul {list-style:none; padding:0; margin: 0;}
.clients ul li {float:left; margin-right:24px; width:180px; height:131px; margin-top:20px; background:#fff;}
.clients ul li img {width:180px; height:131px;}
.clients ul li:nth-child(6n+0) {margin-right:0;}

.title {background-image: url(/wp-content/themes/safetycompliancematters/images/bg.jpg); background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.title.training {background-image: url(/wp-content/themes/safetycompliancematters/images/banner-training.jpg);}
.title.consultancy {background-image:url('/wp-content/themes/safetycompliancematters/images/banner-consultancy.jpg');}
.title.support {background-image:url('/wp-content/themes/safetycompliancematters/images/banner-support.jpg');}
.title.accred {background-image:url('/wp-content/themes/safetycompliancematters/images/banner-accreditation.jpg');}
.title.resource {background-image:url('/wp-content/themes/safetycompliancematters/images/banner-resource.jpg');}
.title.green {background-image:url('/wp-content/themes/safetycompliancematters/images/banner-resource.jpg');}
.title .inner {margin:0 auto; width:1280px; padding:40px 0;}
.title .inner h1 {line-height:60px; font-size:48px; font-weight:bold; text-transform:uppercase; color:#fff; text-shadow: 2px 2px 2px #000;}

.main {margin:40px auto; width:1280px; min-height:400px;}
.main .content {width:920px; float:left;}
.main .content img.alignright {float:right; border:10px solid #e8e8e8; margin: 0 0 15px 15px;}
.main .content .post {border-bottom: 1px solid #e8e8e8; padding-bottom:10px; margin-bottom:10px;}
.main .content .post.first {border-top: 1px solid #e8e8e8; padding-top:10px; margin-top:10px;}
.main .content .post h1 {text-transform:uppercase;}
.main .content .post p.intro {padding:0; width:920px;}
.main .content .test-box {margin-bottom:20px; padding:40px;}
.main .content p > strong {color:#0063a7;}

.main .content p img.alignleft {float:right; padding:10px; margin:0 0 20px 20px; border:5px solid #e8e8e8;}
.main .content li {line-height:1.6em; margin-top:0;}
.main .content .contact-left {padding-top:20px; float:left; width:440px;}
.main .content .contact-right {padding-top:20px; float:right; width:440px;}
.main .content .contact-right h2 {color:#0063a7; text-transform:uppercase;}
.main .sidebar {width:320px; float:right;}
.main .sidebar .sidebar-header {background: url(/wp-content/themes/safetycompliancematters/images/bg-dashed-lines.jpg); margin-bottom: 20px; }
.main .sidebar .sidebar-header h4 {padding: 0 15px 0 0; line-height: 40px; text-transform: uppercase; background: #fff; color: #0063a7; display:inline-block;}
.main .sidebar .contact h1 {font-weight:normal; font-size:24px;}
.main .sidebar .contact h3 {font-weight:normal; font-size:18px; padding:0 0 10px; line-height:1.5em;}
.main .sidebar .test-box {margin-bottom:20px; padding:40px;}

.test-box {background:#e8e8e8; position:relative;}
.test-box span.quotes {font-family: 'Times New Roman'; position:absolute; left:10px; top:10px; font-size:64px;}
.test-box p {padding:0;}
.test-box h4.credit {text-align:right; font-weight:bold; padding: 10px 0 0;}

.accord.open .inner {display:block; border-left:1px solid #696969; border-right:1px solid #696969; border-bottom:1px solid #696969; padding:10px 20px;}
.accord.closed .inner {display:none;} 
.accord h3 {border:1px solid #696969; background:#e8e8e8; margin-top:10px; padding:5px 20px; text-transform:uppercase; font-size:16px; cursor:pointer;}

.footer {border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;}
.footer .inner {width:1280px; margin:40px auto;}
.footer .inner .logo-col {width:180px; float:left; margin-right:40px;}
.footer .inner .logo-col a {width:180px; height:100px; padding:0; display:block; margin-bottom:15px;}
.footer .inner .about-col {width:500px; float:left; margin-right:40px;}
.footer .inner .about-col p {font-size:14px; padding:0;}
.footer .inner .about-col p b {color:#0063a7;}
.footer .inner .links-col {width:240px; float:left; margin-right:40px;}
.footer .inner .links-col.last {margin-right:0px;}
.footer .inner .links-col ul {list-style:none; padding:0; margin:0;}
.footer .inner .links-col ul li {font-size:14px; text-transform:uppercase; line-height:22px; margin-top:0;}
.footer .inner .links-col ul li a {color:#696969;}
.footer .inner .links-col ul li a:hover {text-decoration:underline;}
.footer .inner .links-col ul li b {width:30px; color:#0063a7; display:inline-block;}
.footer .inner > div > h4 {font-size:16px; color:#0063a7; text-transform:uppercase; margin:0 0 10px; font-weight:bold;}

.baseline {}
.baseline .inner {width:1280px; margin:0 auto;}
.baseline .inner p {line-height:20px; padding:10px 0; text-transform:uppercase; font-size:14px;}
.baseline .inner p a {color:#696969;}
.baseline .inner p a:hover {text-decoration:underline;}

@media screen and (min-width: 980px) and (max-width: 1279px) {
.topbar .inner {width:960px;}
.header .inner {width:960px;}

.banner ul.homeslider li.slide .v-align-center {width:480px; margin-left:-480px;}
.banner ul.homeslider li.slide .v-align-center .cell .inner {padding:20px;}
.banner a.prev {margin-left: 380px;}
.banner a.next {margin-left: 440px;}

.intro {width:960px;}
.intro p {padding:10px 20px;}

.services .inner {width:960px; margin:0px auto;}
.services .inner ul li {width:300px; height:188px; margin-right:30px;}
.services .inner ul li:nth-child(4n+0) {margin-left:165px;}
.services .inner ul li a {width:300px; height:188px;}
.services .inner ul li img {width:300px; height:188px;}
.services .inner ul li .holder {top:49px;}
.services .inner ul li .holder h1 {font-size:32px;}

.second {width:960px;}
.second .left {width:460px;}
.second .right {width:380px;}
.second .test-box {padding:40px;}

.clients {width:920px; padding:20px;}
.clients ul li {margin-right:16px; width:140px; height:102px;}
.clients ul li img {width:140px; height:102px;}

.title .inner {width:960px;}
.title .inner h1 {line-height:48px; font-size:40px;}

.main {width:960px;}
.main .content {width:640px;}
.main .content .contact-left {width:310px;}
.main .content .contact-right {width:310px;}
.main .content .post p.intro {padding:0; width:640px;}
.main .sidebar {width:300px;}

.footer .inner {width:960px;}
.footer .inner .logo-col {width:180px; float:left; margin-right:20px;}
.footer .inner .about-col {width:460px; float:left; margin-right:20px;}
.footer .inner .links-col {width:130px; float:left; margin-right:20px;}

.baseline .inner {width:960px; margin:0 auto;}
}

@media screen and (min-width: 600px) and (max-width: 979px) {
.topbar .inner {width:600px; margin:0 auto;}
.topbar .inner p.right {display:none;}

.header .inner {width:600px; margin:10px auto;}
.header .inner .logo {margin-left:210px;}
.header .inner div.menu {clear:both; float:left; padding:0 8px;}
.header .inner div.menu > ul > li {padding:0;}
.header .inner div.menu > ul > li > a {line-height:30px; padding:10px; font-size:14px;}
.header .inner div.menu > ul > li > a:after {bottom: 5px;}
.header .inner div.menu > ul > li:hover > ul.sub-menu {top:45px;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a {font-size:14px; width:290px;}

.banner ul.homeslider li.slide .v-align-center {width:400px; left:50%; margin-left:-300px;}
.banner a.prev, .banner a.next {display:none;}

.intro {width:600px; margin:0px auto;}
.intro h2 {font-size:28px;}
.intro p {padding:10px 0px;}

.services .inner {width:400px; margin:0px auto;}
.services .inner ul li {margin-right:0px; margin-bottom:40px;}
.services .inner ul li:nth-child(4n+0) {margin-left:0px;}
.services .inner ul li:last-child {margin-bottom:0px;}

.second {width:600px;}
.second .left {width:600px; margin-bottom:40px;}
.second .right {width:520px;}

.clients {width:520px;}
.clients ul li {margin:10px; padding:10px; width:220px; height:160px;}
.clients ul li img {width:220px; height:160px;}

.title .inner {width:600px;}
.title .inner h1 {line-height:40px; font-size:32px;}

.main {margin:40px auto; width:600px; min-height:400px;}
.main .content {width:600px; float:left; margin-bottom:40px;}
.main .content .post p.intro {padding:0; width:600px;}
.main .content .contact-left {padding-top:20px; float:left; width:440px;}
.main .content .contact-right {padding-top:20px; float:right; width:440px;}
.main .sidebar {width:600px; float:right;}
.main .sidebar .side-test {float:left; width:280px;}
.main .sidebar .side-contact {float:right; width:280px;}

.footer .inner {width:600px;}
.footer .inner .logo-col {margin-right:40px;}
.footer .inner .about-col {display:none;}
.footer .inner .links-col {width:170px; float:left; margin-right:40px;}

.baseline .inner {width:600px;}
.baseline .inner p {float:none; text-align:center; padding:5px 0;}
}

@media screen and (max-width: 599px) {
.topbar {display:none;}

.header .inner {width:auto; margin:10px;}
.header .inner .logo {position:relative; left:50%; margin-left:-90px; float:none;}
.header .inner .menu-button {display:block; text-align:center; text-transform:uppercase; font-weight:bold; font-size:16px; color:#0063a7; cursor:pointer; padding:10px 40px;}
.header .inner .menu-button i.icon {position:relative; width:18px; height:18px; background-image: url(/wp-content/themes/safetycompliancematters/images/menu-icon.png); display:inline-block; margin: -2px 5px -2px 0;}
.header .inner div.menu {display:none; border-top:1px solid #e8e8e8;}
.header .inner div.menu.active {display:block; width:100%;}
.header .inner div.menu > ul {list-style:none; padding:0; margin:0;}
.header .inner div.menu > ul > li {padding-left:0; float:none;}
.header .inner div.menu > ul > li > a {line-height:20px; padding:10px 20px;}
.header .inner div.menu > ul > li > a:hover {text-decoration:none; color:#0063a7;}
.header .inner div.menu > ul > li > a:hover:after, .header .inner div.menu > ul > li:hover > a:after{width:0;}
.header .inner div.menu > ul > li > ul.sub-menu {display:block; list-style:none; padding:0; margin:0;}
.header .inner div.menu > ul > li:hover > ul.sub-menu {position:relative; background:#fff; top:0px;}
.header .inner div.menu > ul > li > ul.sub-menu > li {margin:0;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a {line-height:20px; padding:10px 20px; font-size:14px; width:auto; color:#0063a7;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a:before {content:'-'; position:relative; padding-right:10px;}
.header .inner div.menu > ul > li > ul.sub-menu > li > a:hover {background:#fff; color:#0063a7; text-decoration:none;}

.banner ul.homeslider li.slide .v-align-center {height: 100%; width:100%; margin-left:0px; left:0px; padding:0 20px; box-sizing:border-box;}
.banner ul.homeslider li.slide .v-align-center .cell .inner {padding:20px;}
.banner ul.homeslider li.slide .v-align-center .cell h1 {font-size:32px;}
.banner a.prev, .banner a.next {display:none;}

.intro {width:auto; margin:0px 10px;}
.intro h1 {font-size:20px;}
.intro h2 {font-size:24px;}
.intro p {padding:10px 0px;}

.services {margin:20px 0; padding:20px 0;}
.services .inner {width:320px;}
.services .inner ul li {width:320px; height:200px; margin-bottom:20px; margin-right:0;}
.services .inner ul li:nth-child(4n+0) {margin-left:0px;}
.services .inner ul li:last-child {margin-bottom:0px;}
.services .inner ul li a {width:320px; height:200px;}
.services .inner ul li img {width:320px; height:200px;}
.services .inner ul li .holder {height:80px; top:60px;}
.services .inner ul li .holder h1 {font-size:28px;}

.second {width:auto; margin:0px 10px;}
.second .left {width:100%; margin-bottom:20px;}
.second .right {width:100%; box-sizing:border-box;}

.clients {width:auto; margin:20px 10px; padding:10px;}
.clients h2 {font-size:20px;}
.clients h4 {font-size:14px;}
.clients ul {width:300px; position:relative; left:50%; margin-left:-150px;}
.clients ul li {margin:5px; width:140px; height:102px;}
.clients ul li img {width:140px; height:102px;}

.title .inner {width:320px; padding:30px 0;}
.title .inner h1 {line-height:32px; font-size:24px; text-shadow: 1px 1px 1px #000;}

.main {margin:20px 10px; width:auto;}
.main .content {width:auto; margin-bottom:20px;}
.main .content .contact-left {width:auto;}
.main .content .contact-right {width:auto;}
.main .content .post p.intro {padding:0; width:auto; margin:0;}
.main .sidebar {width:auto; float:right;}

.accord.open .inner {padding:10px;}
.accord h3 {padding:5px 10px;}

.footer .inner {width:320px; margin:20px auto;}
.footer .inner .logo-col {display:none;}
.footer .inner .about-col {display:none;}
.footer .inner .links-col {width:140px; float:left; margin: 0 10px;}

.baseline .inner {width:auto; margin:0 10px;}
.baseline .inner p {float:none; text-align:center; padding:5px 0;}
}