/* =====================================================================================================
Theme Name: WebEd9 Production Template
Author: Interactive Partners
Author URL: https://www.interactivepartners.com.au
Created: June 2020
Version: 2.10
===================================================================================================== */

/* ==================================================================================================

Table of contents - Start

0 - Reset ( This is needed to minimise compatibility issues accross different browsers )

I - This will contain styling for mobile ( We will use mobile first approach )
1. Brand - This will contain brand styling ( e.g. fonts, colours etc. )
2. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
3. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
4. Curly Brackets or Objects - This will contain styling for curly brackets.
5. Others - this will be the styling for modifiers only (e.g. bold, text-center etc. )

II - this will contain styling for larger phones  ( min-width: 480px )  !== Optional ==!
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

III - this will contain styling for tablets ( min-width: 768px )
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

IV - this will contain styling for desktops ( min-width: 992px ) 
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

V - this is optional for screen sizes larger than desktops ( min-width: 1400px or 1200px )
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

Table of contents - End

===================================================================================================== */

/* ==================================================================================================
0 - Reset - Start

This reset is based on normalize.css
https://necolas.github.io/normalize.css/

Important: 
This( Reset Section ) will set default values across different browsers.
This is needed to minimise cross browser issues.

Note: 
Please change them as needed.
Before making a change please consider carefully as this will affect the whole site.

===================================================================================================== */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    width: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll;
    display: flex;
    align-content: center;
    background: #b5c5c5;
}

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: auto;
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
    -webkit-box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.75);
}

main {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

b,
strong {
    font-weight: bolder;
}


code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

button,
input { /* 1 */
    overflow: visible;
}

button,
select { /* 1 */
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

progress {
    vertical-align: baseline;
}

form label.required:after {
    content: '*';
    color: #e50000;
    margin-left: 3px;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

form {
    font-family: 'Open Sans', sans-serif !important;
}
fieldset {
    background: #fff !important;
}
input, select, textarea {
    border: 1px solid #ddd !important;
}
form label.error {
    color: #ff0000;
}

.header { padding: 0 !important; }

/* ==================================================================================================
0 - Reset - End
===================================================================================================== */


/* ==================================================================================================
I - Small Mobile - Start
===================================================================================================== */

@media (max-width: 350px) {
    
    /* ======================================
    1. Typography - Start
    ========================================= */
    
    
    /* ======================================
    1. Typography - End
    ========================================= */
    
    
    /* ======================================
    2. Objects - Start
    ========================================= */
    
    
    /* ======================================
    2. Objects - End
    ========================================= */
    
}

@media (max-width: 425px) {
    .nav_area .connect-info {
        margin-top: 0;
    }
    .nav_area .connect-info .contact, .nav_area .connect-info .social {
        padding: 0 10px;
    }
    .nav_area .connect-info .social a svg {
        margin: 0;
    }
    .nav_area .connect-info .contact p {
        font-size: 14px !important;
    }
}

/* ==================================================================================================
I - Small Mobile - End
===================================================================================================== */


/* ==================================================================================================
I - Mobile - Start
===================================================================================================== */

/* ======================================
1. Brand - Start

This will contain client related styles
CSS custom properties is not supported on IE browser
Please include an IE fallback option if possible.
========================================= */

:root {
    --brand-colour: #004e9e;          /* Please set color value */
    --brand-alt-colour: #b5c5c5;      /* Please set color value */
    --brand-colour-3: #e20019;        /* Please set color value */
    --brand-font: 'Open Sans';              /* Please set font family value */
    --brand-alt-font: 'Lato';        /* Please set font family value */
}

/* ======================================
1. Brand - End
========================================= */

/* ======================================
2. Typography - Start
========================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif !important;
}

li, p, a, button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

li, p {
    color: #333333;
    text-decoration: none;
}

a:hover, a:active, a:focus {
    color: #e20019 ;
    text-decoration: underline;
}

a.btn_portal, a.btn_portal:visited {
    padding: 10px 25px;
    font-size: 15px;
    color: #FFF;
    background: #e20019;
    text-transform: uppercase;
}

a.btn_portal:hover, a.btn_portal:focus, a.btn_portal:active {
    color: #FFF;
    background: #333333;
    text-decoration: none;
}

.link.white, .link.white:visited {
    color: #FFF;
}
.link.white:hover, .link.white:focus, .link.white:active {
    color: #FFF;
    text-decoration: underline;
}

.normal-case {
    text-transform: none !important;
}

.text--container {
    color: #fff;
}

p, ol li, ul li {
    line-height: 1.6;
}


/* ======================================
2. Typography - End
========================================= */

/* ======================================
3. Layout - Start
========================================= */

.w-100,
.w-95,
.w-90,
.w-85,
.w-80,
.w-75,
.w-70,
.w-65,
.w-60,
.w-55,
.w-50,
.w-45,
.w-40,
.w-35,
.w-33,
.w-30,
.w-25,
.w-23,
.w-20,
.w-15,
.w-10,
.w-5 {
    width: 95%;
    margin: 0 auto;
}

.flex-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}

.darkblue {
    background: #004e9e;
}

.portal-boxes .wrapper {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.sidebar-boxes .wrapper {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.portal-boxes .wrapper .box, .sidebar-boxes .wrapper .box {
    background: #fff;
    text-align: center;
    min-height: 150px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*.faded {
    opacity:0.8;
    filter:alpha(opacity=80);
}

.faded:hover, .faded:active, .faded:focus {
    opacity:1.0;
    filter:alpha(opacity=100);
}*/

.portal-boxes .box-img a, .sidebar-boxes .box-img a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: 0 !important;
}

.portal-boxes .box-img a.bottom, .sidebar-boxes .box-img a.bottom {
    position: absolute;
    width: 100%;
    margin: 0 !important;
    top: 100%;
}
.portal-boxes .box-img:hover a, .portal-boxes .box-img:focus a .portal-boxes .box-img:active a {
    color: #e20019;
}

.sidebar-boxes .box-img {
    background-size: cover;
    background-position: center center;
    height: 300px;
}


.portal-boxes .box-img, .sidebar-boxes .box-img {
    position: relative;
}

.flexrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}


.navbar-default .navbar-nav > li > a {
    padding: 2px 15px 2px 15px;
    border-right: none !important;
    font-weight: bold !important;
}

/* ======================================
3. Layout - End
========================================= */

/* ======================================
4. Curly Brackets or Objects 
- Start
========================================= */

.navbar-collapse.in {
    background: #004e9e;
}
.navbar-collapse {
    border: 1px solid #e7e7e7;
    background: #004e9e;
}

.header-portal.industrial {
    background: #004e9e;
    padding-bottom:0;
    min-height: 200px;
}
.header-top.industrial {
    padding-bottom: 20px;
    min-height: 50px;
}
.industrial .header {
    margin-bottom: 0;
}
.logo.industrial {
    position: inherit;
    height: auto;
    background: #fff;
    text-align: center;
    width: 100%;
    max-width: 200px;
    top: -18px;
}


.portal-boxes .box-img {
    background-size: cover !important;
    background-position: center center !important;
    height: 150px;
}

.portal-boxes .box-img.box1.faded, .portal-boxes .box-img.box1.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/document-library.jpg);
}
.portal-boxes .box-img.box2.faded, .portal-boxes .box-img.box2.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/fluidsconnect.jpg);
}
.portal-boxes .box-img.box3.faded, .portal-boxes .box-img.box3.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/power-generation.jpg);
}
.portal-boxes .box-img.box4.faded, .portal-boxes .box-img.box4.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(/Media/templates/tile-products.jpg);
}
.portal-boxes .box-img.box5.faded, .portal-boxes .box-img.box5.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(/Media/templates/tile-mining.jpg);
}
.portal-boxes .box-img.box6.faded, .portal-boxes .box-img.box6.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(/Media/templates/tile-services.jpg);
}
.portal-boxes .box-img.box7.faded, .portal-boxes .box-img.box7.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/food-ind.jpg);
}
.portal-boxes .box-img.box8.faded, .portal-boxes .box-img.box8.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/launch-cent.jpg);
}
.portal-boxes .box-img.box9.faded, .portal-boxes .box-img.box9.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/defence-glass-manufacturing.jpg);
}
.portal-boxes .box-img.box10.faded, .portal-boxes .box-img.box10.faded:visited {
    background: linear-gradient(rgba(256,256,256,0.5),rgba(256,256,256,0.5)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/ask-fuchs-a-question.jpg);
}
/* hover */
.portal-boxes .box-img.box1.faded:hover, .portal-boxes .box-img.box1.faded:focus, .portal-boxes .box-img.box1.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/document-library.jpg);
}
.portal-boxes .box-img.box2.faded:hover, .portal-boxes .box-img.box2.faded:focus, .portal-boxes .box-img.box2.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/fluidsconnect.jpg);
}
.portal-boxes .box-img.box3.faded:hover, .portal-boxes .box-img.box3.faded:focus, .portal-boxes .box-img.box3.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/power-generation.jpg);
}
.portal-boxes .box-img.box4.faded:hover, .portal-boxes .box-img.box4.faded:focus, .portal-boxes .box-img.box4.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(/Media/templates/tile-products.jpg);
}
.portal-boxes .box-img.box5.faded:hover, .portal-boxes .box-img.box5.faded:focus, .portal-boxes .box-img.box5.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(/Media/templates/tile-mining.jpg);
}
.portal-boxes .box-img.box6.faded:hover, .portal-boxes .box-img.box6.faded:focus, .portal-boxes .box-img.box6.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(/Media/templates/tile-services.jpg);
}
.portal-boxes .box-img.box7.faded:hover, .portal-boxes .box-img.box7.faded:focus, .portal-boxes .box-img.box7.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/food-ind.jpg);
}
.portal-boxes .box-img.box8.faded:hover, .portal-boxes .box-img.box8.faded:focus, .portal-boxes .box-img.box8.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/launch-cent.jpg);
}
.portal-boxes .box-img.box9.faded:hover, .portal-boxes .box-img.box9.faded:focus, .portal-boxes .box-img.box9.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/defence-glass-manufacturing.jpg);
}
.portal-boxes .box-img.box10.faded:hover, .portal-boxes .box-img.box10.faded:focus, .portal-boxes .box-img.box8.faded:active {
    background: linear-gradient(rgba(256,256,256,1),rgba(256,256,256,1)),url(https://portal.fuchs.com.au/Media/Industrial%20Media/TILE%20IMAGES/ask-fuchs-a-question.jpg);
}

.box-img a.btn_portal, .box-img a.btn_portal:visited {
    background: transparent;
    color: #333;
    font-weight: 700;
}
.box-img a.btn_portal:hover, .box-img a.btn_portal:active, .box-img a.btn_portal:focus {
    background: transparent;
    color: #e20019;
    font-weight: 700;
}
.solid.red, .solid.red:visited {
    background: #e20019 !important;
    color: #fff !important;
}
.solid.red:hover, .solid.red:active, .solid.red:focus {
    background: #b5c5c5 !important;
    color: #000 !important;
}

.social a svg {
    margin: 0 10px;
}
.social a:hover svg, .social a:focus svg, .social a:active svg {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.social a svg, .social a:visited svg {
    opacity: 0.5;
    filter: alpha(opacity=50);
}


/* ======================================
5. Others - End
========================================= */


/* ==================================================================================================
I - Mobile - End
===================================================================================================== */


/* ==================================================================================================
II - Large Mobile - Start
===================================================================================================== */

@media (max-width: 470px) {
  	.nav_area .connect-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 0;
    }
    .navbar-default {
        background-color: transparent !important;
    }
}

@media (min-width: 480px) {
    
    /* ======================================
    1. Typography - Start
    ========================================= */
    
    /* ======================================
    1. Typography - End
    ========================================= */
    
    /* ======================================
    2. Layout - Start
    ========================================= */
    
    .nav_area .connect-info .contact {
        margin: 0 20px 0 20px;
    }
  
    /* ======================================
    2. Layout - End
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - Start
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - End
    ========================================= */
    
}

/* ==================================================================================================
II - Large Mobile - End
===================================================================================================== */


/* ==================================================================================================
III - Tablets - Start
===================================================================================================== */

@media (max-width: 767px) {
    .navbar-header {
        background: transparent !important;
    }
    .navbar-default {
        margin-top: 0 !important;
    }
    .logo:first-child {
        margin-left: 0 !important;
    }
    .nav_area .connect-info .social {
        padding: 0 20px;
    }
    .nav_area .connect-info .social svg {
        width: 30px;
    }
}
@media (min-width: 768px) {
    
    /* ======================================
    1. Typography - Start
    ========================================= */

    /* ======================================
    1. Typography - End
    ========================================= */
    
    /* ======================================
    2. Layout - Start
    ========================================= */
    
    .navbar-default .navbar-collapse {
        border-color: transparent !important;
    }

    /* WebEd Grid */
    .w-100 {width: 100%;}
    .w-95 {width: 95%;}
    .w-90 {width: 90%;}
    .w-85 {width: 85%;}
    .w-80 {width: 80%;}
    .w-75 {width: 75%;}
    .w-70 {width: 70%;}
    .w-65 {width: 65%;}
    .w-60 {width: 60%;}
    .w-55 {width: 55%;}
    .w-50 {width: 50%;}
    .w-45 {width: 45%;}
    .w-40 {width: 40%;}
    .w-35 {width: 35%;}
    .w-33 {width: 33%;}
    .w-30 {width: 30%;}
    .w-25 {width: 25%;}
    .w-23 {width: 23%;}
    .w-20 {width: 20%;}
    .w-15 {width: 15%;}
    .w-10 {width: 10%;}
    .w-5 {width: 5%;}
    
    
.portal-boxes .wrapper {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.portal-boxes .box-img a {
    width: 100%;
    font-size: 1.7rem;
    padding: 5px;
}
.portal-boxes .box-img.box6 a {
    word-break: break-word;
}

.flexrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.header-portal.industrial {
    min-height: 150px;
}

    
    /* ======================================
    2. Layout - End
    ========================================= */
    
    
    /* ======================================
    3. Curly Brackets or Objects 
    - Start
    ========================================= */
    
    .footer .social, .footer .contact {
        border-left: 3px solid #b5c5c5;
        padding-left: 20px;
    }
    
    /* ======================================
    3. Curly Brackets or Objects 
    - End
    ========================================= */
    
}

/* ==================================================================================================
III - Tablets - End
===================================================================================================== */


/* ==================================================================================================
IV - Desktop - Start
===================================================================================================== */

@media (min-width: 992px) {
    
    /* ======================================
    1. Typography - Start
    ========================================= */
    
    /* ======================================
    1. Typography - End
    ========================================= */
    
    /* ======================================
    2. Layout - Start
    ========================================= */
    
    
    /* ======================================
    2. Layout - End
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - Start
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - End
    ========================================= */
    
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    .dropdown-menu{
        right: 0 !important;
        left: auto !important;
    }
}



/* ==================================================================================================
IV - Desktop - End
===================================================================================================== */

/* ==================================================================================================
V - Large Desktop - Start
===================================================================================================== */

@media (min-width: 1400px) {
    
    /* ======================================
    1. Typography - Start
    ========================================= */
    
    /* ======================================
    1. Typography - End
    ========================================= */
    
    /* ======================================
    2. Layout - Start
    ========================================= */
    
    /* ======================================
    2. Layout - End
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - Start
    ========================================= */
    
    /* ======================================
    3. Curly Brackets or Objects 
    - End
    ========================================= */
    
}

@media (max-width:1399px){
    
    /* ======================================
    2. Layout - Start
    ========================================= */
    
    .nav_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    nav.navbar-default {
        width: 100%;
    }
    .nav_area .connect-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        width: 100%;
    }
    .nav_area .connect-info .contact {
        border-right: 2px solid #ddd;
        padding: 0 20px;
    }
    
    /* ======================================
    2. Layout - End
    ========================================= */
}

/* ==================================================================================================
V - Large Desktop - End
===================================================================================================== */

@media (min-width:1400px){
  
    .nav_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    nav.navbar-default {
        width: 62%;
    }
    .nav_area .connect-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        width: 38%;
    }
  
}
/* ==================================================================================================
IMPORTANT: Do not write below this. Kindly write or update the css above.
===================================================================================================== */