:root{
 --clr-primary: #d8aa18ff;
 --clr-primary-lte: #ffffc6ff;
 --clr-secondary:  #1b1811ff;
 --clr-secondary-lte: #dbdad1ff;
 --clr-white: #fff;
 --clr-black: #000;
 --ff-primary: 'Merriweather';
 --ff-secondary: ;
 --transition: all 0.3s linear;
 --spacing:  0.2rem;
 --radius: 0.5rem;
}
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
*{
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}
body{
 font-family: var(--ff-primary);
 background: var(--clr-secondary-lte);
 color: var(--clr-black);
 line-height: 1.5;
 font-size: 0.875rem;
}
a{
 text-decoration: none;
}
.link{
 color: var(--clr-primary);
}
.link:hover{
 color: var(--clr-primary-lte);
}
.home-logo{
 background-size: 2rem;
 height: 10%;
}
img{
 width: 100%;
 display: block;
}
h1,h2,h3,h4{
 letter-spacing: var(--spacing);
 text-transform: capitalize;
 line-height: 1.25;
 margin-bottom: 0.75rem;
}
h1{
 font-size: 3rem;
}
h2{
 font-size: 2rem;
}
h3{
 font-size: 1.5rem;
}
h4{
 font-size: 0.875rem;
}
p{
 margin-bottom: 1.25rem;
}
@media screen and  (min-width:  800px) {
 h1{
     font-size: 4rem;
 }
 h2{
     font-size: 2.5rem;
 }
 h3{
     font-size: 2rem;
 }
 h4{
     font-size: 1rem;
 }
 body{
     font-size: 1rem;
 }
 h1,h2,h3,h4{
     line-height: 1;
 }
}
/* extra global css */
.btn{ 
 text-transform: uppercase;
 background: var(--clr-primary);
 color: var(--clr-white);
 padding: 0.375rem 0.75rem;
 letter-spacing: var(--spacing);
 display: inline-block;
 font-weight: 700;
 transition: var(--transition);
 font-size: 0.875rem;
 border: none;
 cursor: pointer;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover{
 color: var(--clr-primary);
 background: var(--clr-primary-lte);
}

.btn-link{
 color: var(--clr-secondary);
}       

/* 404 HEADER */
.breadcrumb-text p {
 color: var(--clr-primary);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 7px;
}

.breadcrumb-text h1 {
 font-size: 50px;
 font-weight: 900;
 color: var(--clr-secondary-lte);
 margin: 0;
 margin-top: 20px;
}

.breadcrumb-section {
 padding: 150px 0;
 background-size: cover;
 background-position: center center;
 position: relative;
 z-index: 1;
 background-attachment: fixed;
 padding-top: 200px;
}

.breadcrumb-section:after {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 content: "";
 background-color: var(--clr-secondary);
 z-index: -1;
 opacity: 0.8;
}

.breadcrumb-bg {
 background:var(--clr-secondary);
}
















/* -----------------------------------------------------------------------------

# 404 Page Styles

----------------------------------------------------------------------------- */
.error-text i {
 font-size: 90px;
 margin-bottom: 30px; }

.error-text h1 {
 font-size: 40px;
 font-weight: 500;
 margin-bottom: 10px; }

.error-text p {
 font-size: 15px;
 margin-bottom: 30px; }

.full-height-section {
 height: 100%;
 display: table;
 width: 100%; }

.full-height-tablecell {
 display: table-cell;
 vertical-align: middle;
 width: 100%; }