/* GLOBAL STYLES
-------------------------------------------------- */
.container {
  margin: 0 auto;
  width: 100%;
  margin: 0;
  padding:0;
  position: relative;
}

a {
  text-decoration: none;
  font-weight: bold;
}

header {
  width: 100px;
  height: 100%;
  position: fixed;
  /*overflow: hidden;*/
  transition: .32s ease-out;
  z-index: 2;
  background: #fff;
}

header a,
.navBtn { color: #353534; }

.toggle { width: 242px; }

.reveal {
  opacity: 1;
  left: 0;
}

nav {
  padding-left: 360px;
  position: absolute;
 transition: .3s ease-out;
 
  top: 42%;
  right: 0;
  width: 100%;
  opacity: 0;
  height: 100%;

 -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;  
  
}
@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}
nav ul{ margin:0;padding:0;list-style:none;}
nav ul li{ position:relative;}
nav ul li ul.sub-menu{ position:absolute;top:0;left:250px;display:none;}
nav ul li a{ display:block;color:#353534;text-decoration:none;padding:10px 0;font-weight:normal;font-size:16px;}
nav ul li a .fa{ font-size:1em;margin-right:10px;}
nav ul li a:hover{ color:#e25852;}
nav ul li:hover ul.sub-menu{ display:block;}

nav a:hover,
.current,
.toggle .navBtn { opacity: 1; }

.toggle nav {
  padding-left: 42px;
  opacity: 1;
}

.navBtn {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 0;
  width: 100%;
  text-align: center;
  line-height: 1em;
/*  -webkit-transform: rotate(0deg);
  transition: .3s ease-out;*/
  display: block;
  cursor: pointer;
  position: absolute;
  top:35%;
  z-index: 1000001;
  opacity: 1;
  left: 28px;
}

.toggle .navBtn {
/*  -webkit-transform: rotate(224deg);*/
  color: #353534;

}

.navBtn:hover { opacity: 1; }

.main {
  background: #f6f6f6;
  float: right;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 100px;
  transition: .6s ease-in;
  overflow: hidden;
  z-index: 2;
}


.push {
  margin-left: 240px;
  margin-right: -142px;
  transition: .3s ease-in;
}

.overlay {
  width: 100%;
  background: rgba(0,0,0, 0.7);
  z-index: 2;
  height: 100%;
  position: fixed;
  display: none;
}

.block { display: block; }
.none { display: none; }

/* 1024 */
@media only screen and (max-width: 1024px) {

.container {
  width: 100%;
  margin: 0;
}

header { width: 8%; }

.main { width: 92%; }
}

/* 768 */
@media only screen and (max-width: 768px) {

header { width: 10%; }

.main { width: 90%; }
}

/* 480 */
@media only screen and (max-width: 480px) {

header { width: 10%; }

.main { width: 90%; }

h3 { font-size: 2em; }

/* 320 */
@media only screen and (max-width: 320px) {
 header {
 width: 15%;
}