@import url("fontawesome/css/all.min.css");
@import url("font/Poppins/Poppins.css");
@font-face {
  font-family: 'CrimsonText';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(font/Crimson/CrimsonText.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
    background: #45515f;
    overflow-x:hidden;
}
/***********Colours***********/
.bg-brown {
    background-color:#5f5545;
}
.bg-red {
    background-color:#5f4845;
}
.bg-white {
    background-color:#EBEFE9;
}
.bg-grey {
    background-color:#EBEFE9;
}
.bg-darkgrey {
    background-color:#50434E;
}
.bg-blue {
    background-color:#459fff;
}
.bg-navy {
    background-color:#45515f;
}
/*****************************/

#header {
    position:relative;
    width: 100%;
    background-color: #45515f;
    color: #EBEFE9;
    z-index:3;
}
#header .logo {
    position: relative;
    text-decoration: none;
}
    #header .logo img {
        width: 100px;
        margin-right: 10px;
    }
#header span {
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    font-family: CrimsonText,serif;
}
#header #toggle {
    position: absolute;
    top: 40px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 99;
    right: 30px;
	font-size:2em;
}
 /*   #header #toggle:before {
        content: '';
        position: absolute;
        bottom: 7px;
        width: 100%;
        height: 2px;
        background: #fff;
    }
    #header #toggle:after {
        content: '';
        position: absolute;
        top: 7px;
        width: 100%;
        height: 2px;
        background: #fff;
    }
    #header.active #toggle:before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    #header.active #toggle:after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
	*/
#navigation {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100%;
    z-index: 1;
    display: grid;
    place-items: center;
    transition: .5s;
    border-left: 1px solid #000;
    
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#212231+0,45515f+100 */
background: rgb(33,34,49); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(33,34,49,1) 0%, rgba(69,81,95,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(33,34,49,1) 0%,rgba(69,81,95,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(33,34,49,1) 0%,rgba(69,81,95,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212231', endColorstr='#45515f',GradientType=1 ); /* IE6-9 */
}
    #navigation.active {
        right:0;
    }
    #navigation ul {
        position: relative;
        display: flex;
        flex-direction: column;
    }
        #navigation ul li {
            list-style: none;
        }
            #navigation ul li a {
                color: #b7b9bd;
                text-decoration: none;
                display: inline-block;
                font-size:2em;
                font-weight: 600;
                text-transform: uppercase;
            }
			#navigation.active ul li a:hover {
				color:#fff;
			}
#wrapper {
    height: 100%;
    width: 100%;
    line-height: 1.5;
    word-spacing: 4px;
    letter-spacing: 1px;
    transition: .5s;
    background-color:#EBEFE9;
}
#wrapper.active {
    transform: translateX(-350px);
    transition: .5s
}
#wrapper.active .wrapper-inner{
    overflow-y: auto;
    overflow-x:hidden;
    position:absolute;
    position:absolute;
    height: 100%;
    width: 100%;
    top:0;
    padding-top:90px;
}
.fixed-bg {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    display: table;
}
.scroll-bg {
    background-color: #EBEFE9;
    padding: 10px 70px;
    color: #000;
    z-index: 10;
}
footer {
    color: #b7b9bd;
}
    footer a:hover {
        text-decoration: none;
        color: #fff;
    }
    footer table td {
        line-height:1em;
        padding-bottom: 10px;
        vertical-align: top;
    }
        footer table td a {
            color: #b7b9bd;
        }
footer .navigation {
            margin: auto;
            width: 200px;
        }
            footer .navigation h4 {
                color: #fff;
            }
            footer .navigation ul {
                position: relative;
                display: flex;
                flex-direction: column;
            }

            footer .navigation ul li {
                list-style: none;
            }
                footer .navigation ul li a {
                    text-decoration: none;
                    display: inline-block;
                    font-weight: 600;
                    text-transform: uppercase;
                    font-size: 0.8em;
                    color: #b7b9bd;
                }
                footer .navigation ul li a:hover 
                {
                    color: #fff;
                }
.m-auto
{
    margin: auto;
}
.address span{
	margin-right: 14px;
}
.address td{
	padding: unset;
}

@media (max-width: 767.98px) { 
	#header h1 {
        font-size: 2em;
        width:264px;
        text-align:center;
    }
}
@media (max-width: 575.98px) {
    #header h1 {
        font-size: 1.5em;
        width:164px;
    }
    
    #header #toggle {
        top: 30px;
    }
}