@font-face {
    font-family: siteFontStandard;
    src: url(fonts/Avenir-Medium.woff);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-family: siteFontStandard, sans-serif;
    font-size: 16px;
}

body {
    margin: 0;
}

header {
    width: 100%;
    height: 100px;
    line-height: 100px;
    margin: 20px 0;
    background-color: #5c6f79;
    color: #fff;
}

nav {
    width: 500px;
    margin: 0 auto;
}

nav a {
    margin: 0 10px;
    padding: 10px 0 5px 0;
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid #fff;
}

#navLogo {
    vertical-align: top;
    padding: 10px 20px;
    background-color: #fff;
}

#respMenu {
    width: 50px;
    height: auto;
    padding-top: 25px;
    margin-left: 30px;
}

footer {
    width: 100%;
    height: 200px;
    background-color: #5c6f79;
    color: #fff;
    padding: 50px;
}

footer p {
    font-size: 12px;
    text-align: center;
    margin: 10px 0;
}

footer a {
    text-decoration:none;
    color: #fff;
}

footer a:hover {
    text-decoration: underline;
}

h2 {
    text-align: center;
    font-size: 50px;
    margin: 0;
}

h4 {
    margin: 0;
}

input {
    display: block;
    width: 60%;
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #5c6f79;
    outline: none;
}

input:focus, textarea:focus {
    border: 2px solid #ff931e;
}

textarea {
    font-size: 16px;
    width: 100%;
    height: 200px;
    padding: 10px;
    border: 2px solid #5c6f79;
    outline: none;
}

.cogBlue {
    list-style-image: url(img/cog-blue.png);
}

.cogWhite {
    list-style-image: url(img/cog-white.png);
}

.partnersText {
    text-align: justify;
    width:80%;
    max-width: 600px;
    margin: 0 auto;
}

.partnersImg {
  margin:0 auto;
  display:block;
  padding-top:10px;
  width:80%;
  max-width: 600px;
}

/* //// NAVIGATION //// */
.navCenter {
    text-align: center;
}
.dropLink {
    cursor: pointer;
}

.dropDown {
    position: relative;
    display: inline-block;
}

.dropDownMenu {
    width: 125px;
    margin-top: 3px;
    padding: 10px;
    line-height: normal;
    background-color: #fff;
    color: #000;
    display: none;
    position: absolute;
    z-index: 1;
}

.dropDownMenu a {
    display: block;
    padding: 0;
    color: #000;
}

#respDropdownMenu {
/*    display: none;*/
    position: absolute;
    top: 100px;
    left: 10px;
     background-color: #fff;
    padding: 10px 40px;
    z-index: 1;
}

#respDropdownMenu a {
    display: block;
    line-height: normal;
    text-decoration: none;
    color: #5c6f79;
    font-size: 20px;
}

.show {
    display: block;
}
/* //// CLASS //// */
.homeNavTwoBoxes {
    height: 450px;
    line-height: 450px;
    color: #fff;
}

.lightBlueBackground {
    background-color: #a4bccb;
}

.darkBlueBackground {
    background-color: #5c6f79;
}

.lightBlueText {
    color: #a4bccb;
}

.darkBlueText {
    color: #5c6f79;
}

.currentPage {
    border-bottom: 2px solid #a4bccb;
}

.grey {
    border-bottom: 2px solid #a4bccb !important;
}

.justifyText {
    text-align: justify;
}

.serviceBtns {
    background-color: #a4bccb;
    border: 1px solid #a4bccb;
    border-radius: 15px;
    color: #5c6f79;
    padding: 12px 28px;
    font-size: 20px;
    margin: 5px;
    outline: none;
    cursor: pointer;
}

.serviceLinks {
    background-color: #a4bccb;
    border-radius: 15px;
    text-align: center;
    height: 100px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 5px;
}

.serviceLinks a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.serviceLinks a:hover {
    color: #5c6f79;
}

/* //// ID //// */
#contactFormResponse {
    display: inline-block;
    padding-left: 0;
}

#contactButton {
    display: block;
    float: right;
    background-color: #5c6f79;
    border: 1px solid #5c6f79;
    color: #fff;
    padding: 10px 40px;
    font-size: 20px;
    margin: 5px 0 5px 5px;
    outline: none;
    cursor: pointer;
}

#contactButton::after {
    clear: both;
}

#contactButton:hover {
    background-color: #a4bccb;
    border: 1px solid #a4bccb;
}

#serviceGapping {
    width: 10px;
    height: 50px;
}

#partnersA {
    margin: 5px;
    color: #a4bccb;
}

#partnersA h4 {
    font-size: 20px;
    font-weight: bold;
    padding: 15px 5px;
    text-align: left;
    background-color: #a4bccb;
    color: #5c6f79;
}

#partnersB {
    margin: 5px;
    color: #5c6f79;
}

#partnersB h4 {
    font-size: 20px;
    font-weight: bold;
    padding: 15px 5px;
    text-align: left;
    background-color: #5c6f79;
    color: #a4bccb;
}

/* //// SECTIONS //// */
#homeImg, #aboutImg, #contactImg, #newsImg, #servicesImg {
    background-color: #ff931e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 500px;
}

#homeImg h2, #aboutImg h2, #contactImg h2, #newsImg h2, #servicesImg h2 {
    padding-top: 221px;
}

#homeImg {
    background-image: url(img/home-background-img.png);
}

#aboutImg {
    background-image: url(img/about-background-img.png);
}

#contactImg {
    background-image: url(img/contact-background-img.png);
}

#primaryPolicy p {
    text-align: justify;
}

#primaryPolicy h4 {
    margin-bottom: 0;
}

#newsImg {
    background-image: url(img/news-background-img.png);
}

#newsText {
    margin-top: 20px;
    color: #5c6f79;
}

#servicesImg {
    background-image: url(img/services-background-img.png);
}

#homeText {
    text-align: center;
    margin: 50px 0;
}

#homeText h3 {
    color: #5c6f79;
}

#homeContact {
    margin: 10px 0 50px 0;
    color: #5c6f79;
}

#homeContact h2 {
    text-align: left;
    padding: 15px 0;
}

#aboutStory {
    padding: 50px 0;
    color: #5c6f79;
}

#aboutTeam {
    padding: 50px 0;
    color: #fff;
}


#aboutPartners {
    margin: 50px 0;
    color: #5c6f79;
}

#aboutServices {
    padding: 50px 0;
}

.serviceContent {
    padding: 50px 0;
}

.serviceContent h2 {
    text-align: left;
}

#serviceGrow, #servcieOpsDev, #servcieWorkforce, #servcieLegal {
    color: #fff;
}

#serviceGlobal, #serviceRisk, #servcieEconmic {
    color: #5c6f79;
}

#aboutBox, #serviceBox, #newsBox {
    cursor: pointer;
}

#brexitFeed, #newsFeed {
    margin-bottom: 20px;
    color: #5c6f79;
}

#brexitFeedBox, #newsFeedBox {
    width: 100%;
    height: 400px;
    border: 2px solid #5c6f79;
}

#steeleFeed {
    padding-bottom: 20px;
    color: #fff;
}

#steeleFeedBox {
    width: 100%;
    height: 400px;
    border: 2px solid #fff;
}

#brexitFeedBox, #newsFeedBox, #steeleFeedInnerBox {
    padding: 0 15px;
}

#steeleFeedInnerBox {
    margin: 10px;
    padding-top: 10px;
    background-color: #fff;
    color: #5c6f79;
    height: 377px;
}

/* //// RESPONSIVE //// */
[class*="col-"] {
    float: left;
    width: 100%;
    padding: 1px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

@media only screen and (min-width: 950px) {
    .col-1 {width: 16.66%;}
    .col-2 {width: 66.68%;}
    .col-3 {width: 33.33%;}
    .col-4 {width: 10%;}
    .col-5 {width: 33.34%;}
    .col-6 {width: 26.66%;}
    .col-7 {width: 25%;}
    .col-8 {width: 50%;}
}

@media only screen and (max-width: 950px) {
    #aboutBox, #serviceBox, #newsBox {margin: 10px 30px !important;}
    #homeContact, #serviceGrow, #serviceGlobal, #servcieOpsDev, #serviceRisk, #servcieWorkforce, #servcieEconmic, #servcieLegal, #aboutServices {padding: 0 30px;}
    #newsText, #brexitFeed, #steeleFeed, #newsFeed {padding: 10px 15px;}
    h2, p {padding: 0 20px;}

    nav {
        display: none;
    }
    #respMenu {
        display: block;
        float: left;
    }
    #respLogo {
        display: block;
        float: right;
    }
    #respLogo::after {
        clear: both;
    }

    .partnersText {
        padding: 0;
        width:90%;
    }

    .partnersImg {
      width:90%;
    }

    .serviceLinks {
        margin: 5px 0;
    }
}

@media only screen and (max-width: 340px) {
    #homeImg h2 {font-size: 35px;}
}

@media only screen and (max-width: 200px) {
    #respLogo {display: none;}
}

@media only screen and (max-width: 800px) {
    #homeNavTwo h2 {font-size: 30px;}
}

@media only screen and (max-width: 1000px) {
    #homeNavTwo h2 {font-size: 40px;}
}