/*!
Theme Name: Fastmet Trading
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fastmet-trading
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Fastmet Trading is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
blockquote {
    display: block;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1230px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*-----------------------
    Typography
-----------------------*/
h1 {
    font-size: 1.75em;
    line-height: 1.1;
    font-weight: 700;
    color: white;
    margin: 0 0 30px 0;
}

h1 img {height:20px; width:auto;}

h2 {
    font-size: 1.5em;
    line-height: 1;
    font-weight: 700;
    color: #515151;
    margin: 0;
}

h2 img {height:17px; width:auto;}

h3 {
    font-size: 1.25em;
    line-height: 1;
    font-weight: 700;
    color: #515151;
    margin: 0 0 40px;
}

h3 span {
    font-weight: 300;
}
.wp-block-image {margin:0 0 0 0;}

@media screen and (min-width: 1025px) {
    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2.125em;
    }

    h3 {
        font-size: 1.75em;
    }
}

@media screen and (min-width: 1600px) {
    h1 {
        font-size: 4em;
    }
}

/*-----------------------
    Header
-----------------------*/
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 200;
    transition: background-color 400ms ease;
}

header.sticky {
    background-color: rgba(6, 46, 106, .7);
}

header .business-info .container {
    max-width: 1300px;
}

header .business-info {
    padding: 15px 0;
    position: relative;;
}

header .logo {
    display: inline-block;
    width: 160px;
}

header .logo img {
    display: block;
    width: 100%;
    height: auto;
}

header .toggle-navigation {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 25px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    transform: translateY(-50%);
    z-index: 220;
}

header .toggle-navigation:active {
    padding: 0;
}

header .toggle-navigation .line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    transition: opacity 250ms linear, transform 250ms linear;
}

header .toggle-navigation .line + .line {
    margin-top: 5px;
}

header .toggle-navigation .line:nth-child(4) {
    position: absolute;
    left: 0;
    top: 7px;
    margin: 0;
}

.navigation-open header .toggle-navigation .line:nth-child(1),
.navigation-open header .toggle-navigation .line:nth-child(3) {
    opacity: 0;
}

.navigation-open header .toggle-navigation .line:nth-child(2) {
    transform: rotate(45deg);
}

.navigation-open header .toggle-navigation .line:nth-child(4) {
    transform: rotate(-45deg);
}

header nav {
    padding-top: 80px;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #06306b;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 30;
}

header nav .container {
    max-width: 1330px;
}

.navigation-open header nav {
    opacity: 1;
    transform: translateX(100%);
}


header .navbar li {
    margin-bottom: 15px;
}

header .navbar a {
    font-size: 0.9375em;
    line-height: 1;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

header .search {
    margin-bottom: 20px;
}

header .form {
    display: flex;
    justify-content: space-between;
}

header .form .form-group {
    width: calc(100% - 70px);
    max-width: calc(100% - 70px);
    flex: 0 0 calc(100% - 70px);
}

header .form .submit-wrapper {
    width: 70px;
    max-width: 70px;
    flex: 0 0 70px;
}

header .form input[type="text"] {
    display: block;
    width: 100%;
    padding: 10px 10px;
    border: none;
    font-size: 1em;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    height: 40px;
}

header .form [type="submit"] {
    display: inline-block;
    padding: 10px 5px;
    border: none;
    border-left: 1px solid #efefef;
    font-size: 1em;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    width: 100%;
    height: 40px;
    text-align: center;
    cursor: pointer;
}

header .social a {
    display: inline-block;
    font-size: 1em;
    color: white;
    margin-right: 15px;
}

header .working-details {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding-bottom: 10px;
}

header .working-details a {
    display: block;
    position: relative;
}

header.sticky .working-details {
    background-color: rgba(6, 46, 106, .7);
}

header .working-details > div {
    padding: 0 8px;
    border-right: 1px solid #2a4d7f;
    flex: 0 0 33.333%;
}

header .working-details > div:last-child {
    border-right: 0;
    padding-right: 0;
}

header .working-details .icon-wrapper {
    min-height: 25px;
    margin: 0 auto 10px auto
}

header .working-details .info,
.mob-wa-button .info {
    display: block;
    position: relative;
    padding: 0;
    min-height: 35px;
    color: white;
    text-align: center;
}

header .working-details .info img,.mob-wa-button .info img {
    display: block;
    position: relative;
    max-width: 25px;
    height: auto;
    margin: 0 auto;
}

header .working-details .info span,
.mob-wa-button .info span {
    display: block;
    font-size: 0.6875em;
}

header .working-details .info .title {
    display: none;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

header .working-details .info span:nth-child(3),
.mob-wa-button .info span:nth-child(3) {
    font-weight: 300;
}

header .extra-text {
    display: none !important;
    font-size: 1em !important;
}

@media screen and (min-width: 500px) {
    header .extra-text {
        display: inline !important;
    }

    header .working-details .info .title {
        display: block;
    }
}

@media screen and (min-width: 600px) {
    header .working-details > div {
        padding: 0 12px;
    }

    header .working-details .info {
        padding-left: 35px;
        text-align: left;
    }

    header .working-details .icon-wrapper {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        margin: 0;
    }

    header .working-details .info img,
    .mob-wa-button .info img {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    header .working-details .info span,
    .mob-wa-button .info span {
        font-size: 0.8125em;
    }
}

@media screen and (min-width: 768px) {
    header .working-details .info {
        padding-left: 50px;
        text-align: left;
    }

    header .working-details .icon-wrapper {
        transform: translateY(-50%);
        width: 35px;
    }

    header .working-details .info .title {
        font-size: 1em;
    }

    header .working-details .info span,
    .mob-wa-button .info span {
        font-size: 1em;
    }
}

@media screen and (min-width: 1025px) {
    header {
        position: absolute;
        padding-top: 120px;
    }

    header .business-info {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 100;
        transition: background-color 400ms ease;
    }

    header.sticky {
        background-color: transparent;
    }

    header.sticky .business-info {
        background-color: rgba(6, 46, 106, .7);
    }

    header .toggle-navigation {
        display: none;
    }

    header .business-info {
        padding: 22px 0;
    }

    header .logo {
        width: 240px;
    }

    header nav {
        padding-top: 0;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        overflow-y: visible;
        background-color: transparent;
        opacity: 1;
        transition: none;
        transform: none;
        z-index: 30;
    }

    .navigation-open header nav {
        transform: none;
    }

    header .head-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .working-details {
        display: inline-flex;
        justify-content: flex-start;
        position: static;
        top: auto;
        left: auto;
        width: auto;
        padding-bottom: 0;
    }

    header.sticky .working-details {
        background-color: transparent;
    }

    header .navigation {
        background-color: white;
        position: relative;
        border-radius: 8px;
        padding: 25px 0 25px 14px;
    }

    header .navbar li {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
    }

    header .navbar a {
        color: #515151;
        font-weight: 600;
        transition: color 300ms ease;
    }

    header .navbar a:hover {
        color: #8dc63f;
    }

    header .additional-info {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 210px;
    }

    header .search {
        width: 70px;
        flex: 0 0 70px;
        margin-bottom: 0;
    }

    header .social {
        display: flex;
        width: 140px;
        height: 100%;
    }

    header .social a {
        width: 70px;
        flex: 0 0 70px;
        height: 100%;
        color: black;
        margin-right: 0;
        line-height: 70px;
        text-align: center;
        border-left: 1px solid #efefef;
        transition: color 300ms ease;
    }

    header .social a:hover {
        color: #8dc63f;
    }


    header .form .form-group {
        display: none;
    }

    header .form {
        display: block;
        height: 100%;
    }

    header .form .submit-wrapper {
        height: 100%;
        position: relative;
        z-index: 10;
    }

    header .form [type="submit"] {
        height: 100%;

    }

    header .form .form-group {
        display: block;
        position: absolute;
        width: 700px;
        max-width: 700px;
        flex: 0 0 auto;
        right: 0;
        top: 100%;
        height: 100%;
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity 300ms ease, transform 300ms ease;
        z-index: -1;
    }

    header .form input[type="text"] {
        height: 100%;
        border: 1px solid #efefef;
        border-radius: 8px;
    }

    header .form .form-group.show {
        opacity: 1;
        transform: none;
    }
}

@media screen and (min-width: 1100px) {
    header .working-details {
        width: 750px;
    }
}

@media screen and (min-width: 1400px) {
    header .navbar li {
        margin: 0 14px;
    }

    header .navbar a {
        font-weight: 700;
    }
}

/*-----------------------
    Hero
-----------------------*/
.hero {
    position: relative;
    background: url('images/hero.jpg') no-repeat 50% top;
    background-size: cover;
    padding: 190px 0 30px 0;
    text-align: center;
}

.hero p {
    font-size: 1.125em;
    line-height: 1.4;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: white;
}

.hero .links a {
    display: block;
    padding: 10px 30px;
    font-size: 0.875em;
    font-weight: 700;
    color: #515151;
    background-color: white;
    border-radius: 10px;
    text-transform: uppercase;
}

.hero .links a + a {
    margin-top: 10px;
}

@media screen and (min-width: 1025px) {
    .hero {
        padding: 260px 0 61px 0;
    }

    .hero p {
        margin-bottom: 2px;
    }

    .hero .links a {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.9375em;
        padding: 20px 40px;
        border-radius: 30px / 50%;
        transition: background-color 500ms ease, color 400ms ease;
        margin: 0 8px;
    }

    .hero .links a:hover {
        background-color: #042b63;
        color: white;
    }

    .hero .links a + a {
        margin-top: 0;
    }

    .hero h1 span {
        display: block;
    }
}

/*-----------------------
    Our Services
-----------------------*/
.our-services {
    padding: 60px 0 40px 0;
    text-align: center;
}

.our-services p {
    font-size: 1em;
    line-height: 1.5;
    color: #515151;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0 0 35px 0;
}

.our-services .service-item {
    display: block;
    height: 240px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 25px;
}

.our-services .service-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(2, 24, 69, 1), rgba(2, 24, 69, 0.7) 40%, rgba(255, 255, 255, 0));
    z-index: 5;
}



.our-services .service-item .back-image {
    display: block;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.our-services .service-item .front-image {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 10%;
}

.our-services .service-item span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px 25px 20px;
    color: white;
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
}

@media screen and (min-width: 480px) {
    .our-services .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .our-services .list .service-item {
        width: 48%;
        flex: 0 0 48%;
        height: 370px;
    }
}

@media screen and (min-width: 1025px) {
    .our-services p {
        font-size: 1.5em;
    }

    .our-services .list .service-item {
        width: calc(25% - 22px);
        max-width: calc(25% - 22px);
        flex: 0 0 calc(25% - 22px);
    }

    .our-services .service-item img {
        transform-origin: 50% 50%;
        transition: transform 350ms ease;
    }

    .our-services .service-item:hover img {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@media screen and (min-width: 1400px) {
    .our-services .service-item span {
        font-size: 1.875em;
    }
}

/*-----------------------
    Contact Us
-----------------------*/
.contact-us {
    background: url('images/contact-form-background.jpg') no-repeat 50% top;
    background-size: cover;
    padding-top: 115px;
}

.contact-us .container {
    padding-left: 0;
    padding-right: 0;
}

.contact-us .contact-details {
    background-color: white;
}

.contact-us .form {
    padding: 50px 15px;
}

.contact-us .form-group {
    margin-bottom: 28px;
}

.contact-us label {
    display: block;
    font-size: 1em;
    font-weight: 600;
    color: black;
    margin-bottom: 15px;
}

.contact-us label i {
    color: #8ae55e;
    margin-left: 6px;
}

.contact-us .form-control {
    display: block;
    width: 100%;
    padding: 15px 10px;
    border: 1px solid #e2e2e2;
}

.contact-us button[type="submit"] {
    padding: 20px 40px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-weight: 600;
    background-color: #8dc63f;
    text-transform: uppercase;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 300ms ease;
}

.contact-us button[type="submit"]:hover {
    background-color: #021845;
}

.contact-us .our-contacts {
    padding: 0 15px 10px 15px;
}

.contact-us .our-contacts .details {
    position: relative;
    padding-left: 47px;
}

.contact-us .our-contacts i {
    position: absolute;
    left: 0;
    top: 5px;
    color: #939393;
    font-size: 1.75rem;
}

.contact-us .our-contacts .details {
    margin-bottom: 40px;
}

.contact-us .our-contacts .details h6 {
    font-size: 1em;
    color: #4c4c4c;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.contact-us .our-contacts .details span,
.contact-us .our-contacts .details p {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 300;
    color: #a4a4a4;
    margin: 0;
}

.contact-us .form-error {
    display: block;
    font-size: 0.875em;
    margin-top: 3px;
    color: #f44336;
    font-style: italic;
    text-align: left;
}

.contact-us .has-error .form-control {
    border-color: #f44336;
}

@media screen and (min-width: 1025px) {
    .contact-us {
        height: 700px;
        padding-top: 121px;
    }

    .contact-us .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-us .contact-details {
        display: flex;
        position: relative;
        z-index: 10;
		margin-bottom:20px;
    }

    .contact-us .contact-details .form {
        width: 67%;
        flex: 0 0 67%;
        padding: 80px 30px 80px 60px;
        border-right: 1px solid #f2f2f2;
    }

    .contact-us .contact-details .our-contacts {
        width: 33%;
        flex: 0 0 33%;
        padding: 80px 70px 40px 40px;
    }

    .contact-us .form-group {
        margin-bottom: 32px;
    }

    .contact-us h3 {
        margin-bottom: 55px;
    }

    .contact-us .our-contacts .details {
        padding-left: 57px;
    }
}

/*-----------------------
    Inner Page Content
-----------------------*/
.metals img {width:25%;}

@media screen and (max-width: 600px) {
	.metals img {width:33.3333%;}
}

.inner-page-content {
    position: relative;
    background: url(images/inner-page-background.jpg) no-repeat 50% top #031d4e;
    background-size: 100% auto;
    padding: 90px 0 30px 0;
}

.inner-page-content .container,footer .container {
    max-width: 1330px;
}

.inner-page-content main {
    background-color: white;
    padding: 30px 15px;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 300;
    color: black;
    margin-bottom: 30px;
}

.inner-page-content h1 {
    font-size: 2rem;
    line-height: 1.375;
    color: #000000;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.inner-page-content h2 {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #000000;
    font-weight: 300;
    margin: 0 0 45px 0;
}

.inner-page-content h3 {
    font-size: 1.125rem;
    line-height: 1.4;
    color: #000000;
    font-weight: 600;
    margin: 15px 0 15px 0;
}

.inner-page-content h4 {
    font-size: 1rem;
    line-height: 1.4;
    color: #000000;
    font-weight: 600;
    margin: 15px 0 15px 0;
}

.inner-page-content h5 {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #000000;
    font-weight: 600;
    margin: 15px 0 15px 0;
}

.inner-page-content h6 {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #000000;
    font-weight: 600;
    margin: 15px 0 15px 0;
}

.inner-page-content ul li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 0px;
}

.inner-page-content ul li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 50%;
    background-color: black;
}

.inner-page-content ol {
    list-style-type: none;
    padding: 0;
    counter-reset: list;  
}

.inner-page-content ol li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 5px;
}

.inner-page-content ol li::before {
    counter-increment: list;
    content: counter(list) ".";
    font-weight: 600;
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 3px;
}

.inner-page-content p {
    margin: 0 0 25px 0;
}



.inner-page-content p::after {
    content: '';
    display: table;
    
}

.inner-page-content main img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.inner-page-content .table {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    margin-bottom: 20px;
}

.inner-page-content caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left;
}

.inner-page-content .table thead th{
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: bottom;
    border-bottom: 2px solid #ddd
}

.inner-page-content .table tbody tr td,
.inner-page-content .table tbody tr th,
.inner-page-content .table tfoot tr td,
.inner-page-content .table tfoot tr th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.inner-page-content .table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

.inner-page-content blockquote {
    background: #f9f9f9;
    border-left: 5px solid #8dc63f;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

.inner-page-content blockquote:before {
    color: #8dc63f;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.5em;
}

.inner-page-content aside .service-item {
    display: block;
    height: 240px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 25px;
}

.inner-page-content aside .service-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(2, 24, 69, 1), rgba(2, 24, 69, 0.7) 40%, rgba(255, 255, 255, 0));
    z-index: 5;
}

.inner-page-content aside .service-item .back-image {
    display: block;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.inner-page-content aside .service-item .front-image {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 10%;
}

.inner-page-content aside .service-item span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px 25px 20px;
    color: white;
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
}

@media screen and (min-width: 480px) {
    .inner-page-content .left-float {
        float: left;
        margin: 0 15px 15px 0;
    }

    .inner-page-content .right-float {
        float: right;
        margin: 0 0 15px 15px;
    }
    
    .inner-page-content aside .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .inner-page-content aside .list .service-item {
        width: 48%;
        flex: 0 0 48%;
        height: 370px;
    }
}

@media screen and (max-width: 767px) {
    .inner-page-content .table-responsive {
        width: 100%;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}

@media screen and (min-width: 1025px) {
    .inner-page-content {
        padding-top: 230px;
        padding-bottom: 0;
    }
    
    .inner-page-content .content,footer .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .inner-page-content main {
        width: 75%;
        flex: 0 0 75%;
        font-size: 1.25em;
        padding: 40px 30px 20px 30px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        position: relative;
        margin-bottom: 0;
    }
    
    .inner-page-content aside {
        width: calc(25% - 20px);
        max-width: calc(25% - 20px);
        flex: 0 0 calc(25% - 20px);
    }
    
    .inner-page-content aside .list {
        display: block;
    }
    
    .inner-page-content aside .list .service-item {
        width: 100%;
        height: 200px;
        margin-bottom: 25px;
    }
    
    .inner-page-content aside .service-item img {
        transform-origin: 50% 50%;
        transition: transform 350ms ease;
    }

    .inner-page-content aside .service-item:hover img {
        transform: translate(-50%, -50%) scale(1.15);
    }

    .inner-page-content h1 {
        font-size: 3rem;
    }

    .inner-page-content h2 {
        font-size: 1.5rem;
    }

    .inner-page-content h3 {
        font-size: 1.4rem;
    }

    .inner-page-content h4 {
        font-size: 1.3rem;
    }

    .inner-page-content h5 {
        font-size: 1.2rem;
    }

    .inner-page-content h6 {
        font-size: 1.1rem;
    }
    
    .inner-page-content .overflown-content {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        min-height: 30px;
        background-color: white;
        padding: 20px 30px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
}

/*-----------------------
    Footer
-----------------------*/

footer {
    padding: 80px 0;
    background: url('images/footer-background.jpg') no-repeat 50% bottom;
    background-size: cover;
    font-size: 0.9375em;
    line-height: 1.46;
    font-weight: 300;
    color: white;
}



footer .company {

    margin-bottom: 50px;
}

footer .company img {
    display: block;
    width: 200px;
    height: auto;
    margin-bottom: 5px;
}

footer .social a {
    margin-right: 10px;
}

footer h4 {
    font-size: 1.25em;
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

footer .contact-option {
    margin-bottom: 15px;
}

footer .contact-option i {
    margin-right: 15px;
}

footer .copyright p {
    margin: 0;
}

.inner-page-content main {
}

body.home footer {padding-top:200px;}
body.single-the_locations footer {padding-top:90px;}
body.home footer .container {max-width: 1230px;}
body.home .locations-block {margin-bottom:15px; width:100%;}
.locations-block ul li {display:inline-block; }
.locations-block ul li a {padding:5px 10px 5px 10px; display:block;}
.locations-block ul li a:hover{text-decoration: underline;}

@media screen and (min-width: 1025px) {
    footer {
        padding-top: 270px;
    }
	
	body.page footer {
		
		padding-top:70px;
	
}

    footer .info {
        display: flex;
        justify-content: space-between;
    }

    footer .info .company {
        width: 47%;
        flex: 0 0 47%;
        margin-bottom: 0;
    }

    footer .info .contact-details {
        width: 44%;
        flex: 0 0 44%;
    }

    footer .contact-details .options {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    footer .contact-details .contact-option {
        width: calc(50% - 10px);
        max-width: calc(50% - 20px);
        flex: 0 0 calc(50% - 20px);
    }

    footer .copyright .container {
        position: relative;
    }

    footer .copyright p {

        position: absolute;
        right: calc(44% - 400px);
        top: -32px;
    }
}

/*-----------------------
    Modal Popup
-----------------------*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px 15px 10px 15px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
	max-width:300px;
	text-align: center;
}
.modal-content img {max-width: 100%;}
.modal-content p {margin-bottom:0; font-size:18px; font-weight:700;}
.modal-content p:first-of-type {margin-bottom:0;}
.modal-content p:nth-of-type(2) {margin-top:0; margin-bottom:10px;}

.modal-content a {font-size:24px; display:inline-block; background-color:#8cc63f; color:#ffffff; font-weight:bold; padding:10px;}


@media screen and (min-width: 1025px) {.mob-wa-button,.nav-wrap {display:none;}}

@media screen and (max-width: 1024px) {
	.head-flex {display:flex; justify-content: space-between; align-self: center;}
.mob-wa-button,header .logo,header .nav-wrap {display:flex;}
	.mob-wa-button {margin-right:50px;}
	.mob-wa-button img {width:40px; height:40px;}
	header .toggle-navigation .line {display:block !important;}
}

@media screen and (max-width: 500px) {
	.mob-wa-button .info span {display:none;}
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.call.whatsapp:hover,.mob-wa-button:hover {cursor: pointer;
    cursor: hand;}

/*-----------------------
    Helper classes
-----------------------*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both
}

img {
    border: medium none;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-center {
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

a {
    text-decoration: none;
    color: inherit;
}
.location-img {
    max-width: 38%;
}
img.alignright, .align-right {
    float: right;
    margin-left: 20px;
}

.location-img p {
    text-align: center;
    color: #ffffff;
    background-color: #6cc445;
    padding: 10px 5px 10px 5px;
    line-height: 120%;
}

.container main a {color: #8cc63f;}

.wp-block-image figcaption {font-size:18px; background-color:#000000; color:#ffffff; margin-top:0; padding:5px; text-align: center;}

.metals a img {transition: transform .2s;}

.metals a img:hover {transform: scale(1.1);}

/* Locations Pages */
.locations-block {
	width:75%;

background-color: white;
    padding: 30px 30px 20px 30px;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 300;
    color: black;
    margin-bottom: 30px;
}

.inner-page-content h2 {font-size:28px; color:#8cc63f; font-weight:700; margin:20px 0 10px 0; line-height:110%;}

@media screen and (max-width: 420px) {}



@media screen and (min-width: 768px) {}

@media screen and (min-width: 1025px) {h1 img {height:33px; width:auto;} h2 img {height:23px; width:auto;}}

@media screen and (min-width: 1200px) {}

@media screen and (min-width: 1600px) {h1 img {height:45px; width:auto;}}

@media screen and (max-width: 600px) {
	.location-img {max-width: none; margin-left:0;}
	.single-the_locations .inner-page-content h1 {font-size:24px; line-height:100%;}

}

@media screen and (max-width: 767px) {
	.wp-block-image,.wp-block-image figure,.wp-block-image figure img {width:100%; margin-top:0;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 991px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (min-resolution: 192dpi) and (max-width: 991px),
only screen and (min-resolution: 2dppx) and (max-width: 991px) {}

@media screen and (max-width: 1023px) {
	.locations-block {	width:100%;}
	
}