html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
  background:#e1e1e1;
  font-size:16px;
  font-family:sans-serif;
  line-height:25px;
  color:#555;
  margin:0;
}

.hamburger div, .container {
    -webkit-transition:all .08s ease-out;  -moz-transition:all .08s ease-out;  -o-transition:all .08s ease-out;  transition:all .08s ease-out;
}

.hamburger div, .hamburger, nav, .main, .burger-wrap, .menu-cover {
    -webkit-transition:all .15s ease;  -moz-transition:all .15s ease;  -o-transition:all .15s ease;  transition:all .15s ease;
}

.burger-wrap {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:60px;
  background:#34B5D9;
  cursor:pointer;
  z-index:50;
}

.hamburger {
  position:absolute;
  top:15px;
  left:8px;
  width:50px;
}
.hamburger span {
  position:absolute;
  top:35px;
  color:#222;
  font-size:0.85em;
}

.hamburger div {
  position:absolute;
  height:4px;
  width:40px;
  background:#222;
}
.burger1 {
  top:5px;
}
.burger2 {
  top:16px;
}
.burger3 {
  top:27px;
}

.burger-wrap:hover {
  background:#1E8DB3;
  width:73px;
}

.burger-wrap:hover .hamburger {
  left:15px;
}

.burger-wrap:hover .hamburger span {
  margin-left:6px;
}

.burger-wrap:hover .burger1 {
  transform:rotate(215deg);
  width:30px;
  left:20px;
  top:8px;
}
.burger-wrap:hover .burger2 {
  left:3px;
  width:40px;
}
.burger-wrap:hover .burger3 {
  transform:rotate(-215deg);
  width:30px;
  left:20px;
  top:24px;
}

/*

.hamburger {
  position:fixed;
  top:5px;
  left:8px;
  height:30px;
  width:30px;
  cursor:pointer;
}

.hamburger div {
  position:absolute;
  height:3px;
  width:25px;
  background:#333;
}
.burger1 {
  top:5px;
}
.burger2 {
  top:13px;
}
.burger3 {
  top:21px;
}

.hamburger:hover {
  background:#34B5D9;
}

.hamburger:hover .burger1 {
  transform:rotate(215deg);
  width:15px;
  left:10px;
  top:9px;
}
.hamburger:hover .burger2 {
  left:3px;
  width:20px;
}
.hamburger:hover .burger3 {
  transform:rotate(-215deg);
  width:15px;
  left:10px;
  top:17px;
}


.nav-open .burger-wrap {
  width:150px;
}

.nav-open .hamburger {
  right:0;
  left:auto;
}

.nav-open .burger-wrap:hover .hamburger {
  right:0;
  left:auto;
}

.nav-open .burger-wrap:hover .hamburger {
  left:15px;
}

.nav-open .burger-wrap:hover .burger1 {
  transform:rotate(-215deg);
  width:30px;
  left:70px;
  top:8px;
}
.nav-open .burger-wrap:hover .burger2 {
  left:73px;
  width:40px;
}
.nav-open .burger-wrap:hover .burger3 {
  transform:rotate(215deg);
  width:30px;
  left:70px;
  top:24px;
}

*/



.nav-open nav {
  left:0; 
}

.nav-open .main {
  margin-left:0;
}


.menu-cover {
  position:absolute;
  left:0;
  top:0;
  right:0;
  background:rgba(0,0,0,0.2);
  bottom:auto;
  z-index:10;
  cursor:pointer;
}

.nav-open .menu-cover {
  bottom:0;
}

.nav-open .container {
  transform:scale(0.98);
}

nav {
  position:fixed;
  padding:1em;
  left:-100%;
  background:#34B5D9;
  color:#fff;
  width:150px;
  top:0;
  bottom:0;
  box-shadow:0 0 0 20px rgba(0,0,0,0.05);
  z-index:60;
}

nav ul {
  margin:0;
  padding:0;
  list-style:none;
}

.main {
  float:left;
  width:100%;
  position:relative;
}

.container {
  margin:65px auto 2em;
  position:relative;
  background:white;
  width:800px;
  padding:1em 3em;
  box-shadow:-10px 10px 0 0 rgba(0,0,0,0.05);
  border-left:5px solid #34B5D9;
}

.container:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width: 0;
	height: 0;
	border-top: 3em solid #e1e1e1;
	border-left: 3em solid transparent;
}
.container:after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width: 0;
	height: 0;
	border-left: 3em solid #e9e9e9;
	border-top: 3em solid transparent;
}

h1 {
  color:#222;
  margin-bottom:0;
}

h3 {
  font-weight:normal;
  text-transform:uppercase;
  color:#999;
  font-size:0.9em;
}

.drop-cap:first-letter {
  font-size:6.3em;
  line-height:1em;
  margin:0 0.05em 0em 0;
  float:left;
  background:#34B5D9;
  color:#fff;
  padding:0 0.1em;
}