/**
 * Common styles
 *
 * @author Wouter Van den Heede
 *
 */

/* ===========================================
   Common
   =========================================== */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.wrapper {
	/*max-width: 96rem;*/
	max-width: 109rem;
	min-width: 32rem;
	margin: 0 auto;
	/*position: relative;*/
	padding: 0 1rem;
}

body > * {
	font-size: 1.3rem; /* placed here instead of in body -> fix for Chrome bug */
	line-height: 1.5;
}

body {
    font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
}

a {
	text-decoration: none;
    font-size: 1.7rem;
}

p, address, tr {
	font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
	line-height: 1.5em;
	font-size: 1.6rem;
	color: #27223E;
	margin-bottom: 1.5rem;
}

ul {
	list-style: none;
}

h1, h2, h3, h4 {
	font-weight: normal;
	font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
	color: #EB9A2D;
}

h1 {
    background-color: #EB9A2D;
}

h1 a {
    margin: auto;
    width: 17rem;
    text-align: center;
}

h2 {
	/*font-size: 2.4rem;*/
	font-size: 2.9rem;
	text-transform: uppercase;
	text-align: center;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #f5cd96;
}

::-webkit-scrollbar-thumb:hover {
    background: #f1b86c;
}


/* ===========================================
   Header
   =========================================== */
header {
    background-color: #EB9A2D;
    height: 8rem;
    width: 100%;
}

.lock-scroll {
    /*position: fixed;*/
    overflow: hidden;
}

/*nav {
  height: 8rem;
  width: 100%;
}*/

nav .logo {
    float: left;
    margin-top: 1.4rem;
}

nav .logo img {

    width: 100%;
}
/*nav .logo a {
    line-height: 8rem;
    font-size: 2.5rem;
    color: white;
}*/

nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    /*background: #2c3e50;*/
    background: #77490b;
    top: 8rem;
    left: -100%;
    text-align: center;
    transition: all .5s;
}

nav ul li {
    display: block;
    margin: 5rem; 0;

}

nav ul li a {
    color: white;
    padding: 0.7rem 1.3rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #EB9A2D;
}

.menu-btn{
    display: block;
    color: white;
}
.menu-btn {
    font-size: 2.3rem;
    cursor: pointer;
}
.menu-btn i {
    float:right;
    line-height: 8rem;
}
.menu-btn i.active:before {
    content: "\f00d";
}
.navbar .menu.active {
    left: 0;
}

#nav-icon {
  width: 3rem;
  float: right;
  height: 2.3rem;
  position: relative;
  margin-top: 2.85rem;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0rem;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 0.9rem;
}

#nav-icon span:nth-child(4) {
  top: 1.8rem;
}

#nav-icon.open span:nth-child(1) {
  top: 1.8rem;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* ===========================================
   Footer
   =========================================== */
footer {
    background-color: #EB9A2D;
    height: 5rem;
    width: 100%;
    margin-top: 4rem;
}

footer p {
    text-align: center;
    line-height: 5rem;
    color: white;
}


@media (min-width: 45em) {
	/* ===========================================
	   Header
	   =========================================== */
    nav ul {
        float: right;
        background: none;
        height: 8rem;
        width: auto;
        position: inherit;
        transition: none;
        line-height: 8rem;
    }
    nav ul li {
        display: inline-block;
        margin: 0;
        margin-left: 5rem;
    }
    nav ul li a {
        text-transform: capitalize;
    }
    nav ul li a:hover {
        color: white;
        background: #eda442;
    }
    .navbar .menu li a {
        display: block;
        line-height: 4rem;
        margin-top: 2rem;
        padding: 0 1rem;
    }
    .menu-btn {
        display: none;
    }
}