@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');


:root{
  --side-bar-width : 350px;
  --main-color-800 : #243123;
  --main-color-600 : #30412f;
  --main-color : #3c513b;
  --main-color-200 : #637462;
  --main-color-100 : #8a9789;
}


@media screen and (max-width: 600px) {
  :root{
  --side-bar-width : 100vw;
  }
}

*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: 'Lato', sans-serif;
}


.sidebar {
  position: fixed;
  left: calc(var(--side-bar-width) * -1);
  width: var(--side-bar-width);
  height: 100%;
  background: #477146;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  user-select: none;
  padding-top: 100px;
  padding-bottom: 100px;
}
.sidebar header img{
  width: 50%; 
}

.sidebar ul {
  text-align: center;
  padding-left: 0px;
  position: relative;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 50px;
  font-size: 16px;
  color: white;
  box-sizing: border-box;
  transition: .4s;
  text-transform: uppercase;
}
#linksmartlodge{  
    font-family: 'Architects Daughter', cursive;
    text-transform: capitalize;

}
#linksmartlodge i{ 
  margin-right: 3px;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}


.sidebar footer{
  position: fixed;
  bottom: 60px;
  text-align: center;
  width: var(--side-bar-width);
}

.sidebar footer img{
  width: calc(var(--side-bar-width) - 200px) ;

}



#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: var(--main-color-800);
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 40px;
  top: 25px;
  font-size: 25px;
  color: #5f715e;
  padding: 6px 8px;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left:  calc(var(--side-bar-width)*-1 );
  top: 17px;
  font-size: 30px;
  color: var(--main-color-200);
  padding: 4px 9px;
  transition: all .5s ease;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: var(--side-bar-width);
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left:  calc(var(--side-bar-width) - 50px);
}
#check:checked ~ section{
  margin-left: var(--side-bar-width);
}
section{
  /*
  background: url(../images/bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;*/
  height: 100vh;
  transition: all .5s;
}


#typedtext{
  /*
  
  font-family: 'Fasthand', cursive; NOOOOO
  font-family: 'Architects Daughter', cursive;
  */
  font-family: 'Covered By Your Grace', cursive;
  font-size: 60pt;
  letter-spacing: 0.3em;
  color: whitesmoke;
  text-shadow: 1px 1px var(--main-color);
}


#about-us-page  section{
  position: relative;
  background-image: url('../images/bg-about-us.jpg');
  background-position: center;
  background-size: cover;
}

#about-us-page  #innertext{
  width: 30%;
  position: absolute;
  top: 250px;
  padding : 50px 5% 50px 5%;
  text-align: center;
  padding-bottom : 50px;
  background-color: rgba(255, 255, 255, .8);
  color : #3c513b;


}


#about-us-page  #innertext .pagetitle{
  text-transform: uppercase;
  padding-bottom: 16px;
  font-size: 16px;
}


#about-us-page  #innertext .title{
  padding-bottom: 20px;
}



#about-us-page  #innertext p{
  font-size: 16px;
  padding-bottom: 15px;
}