* {margin: 0; padding: 0; box-sizing: border-box;}

.wrapper {
    font: 20px/200% Arial, Helvetica, sans-serif ;
    overflow-x: hidden;
    }

section {
    position: fixed;
    width: 100%;
    overflow: auto;
    height: 100%;
    padding:100px;
    margin-left:0;
    background-image:url("http://5preview.com/pub/media/slideshows/R3.jpg");
    background-size:cover;
    /* add the animation*/
    transition: margin .3s;
    left:0;
    }

ul {list-style: none;}

/* The menu */
.menu {
    width: 200px;
    position: fixed;
    top: 0;
    height:100%;
    margin-left: -200px;
    background: #222;
    padding: 15px;
    /* add the animation*/
    transition: margin .3s;
    left:0;
    }

/* Hide the checkbox */
input[type=checkbox] {
    position: fixed;
    right: -9999px;
    opacity: 0;
    }

/* Toggle */
.nav-toggle {
    display: block;
    position: fixed;
    top: 10px;
    left: 0px;
    height: 32px;
    width: 40px;
    cursor: pointer;
    z-index: 99;
    margin-left:10px;
    /* add the animation*/
    transition: margin .3s;
    }

.nav-toggle span {
    position: relative;
    display: block;
    height: 2px;
    width: 40px;
    background: #000;
    /* add the animation*/
    transition: all .3s;
    }

.nav-toggle span:nth-child(2) {top: 12px;}
.nav-toggle span:nth-child(3) {top: 24px;}

/* Toggle moving */

input[type=checkbox]:checked ~ .nav-toggle {
  margin-left: 200px;
}

input[type=checkbox]:checked ~ .nav-toggle span:nth-child(1) {
    top:  8px;
    left:-7px;
    height:4px;
    transform: scale(0.5) rotate(-45deg);
}

input[type=checkbox]:checked ~ .nav-toggle span:nth-child(2) {
  /*display: none;*/
  left:6px;
  }

input[type=checkbox]:checked ~ .nav-toggle span:nth-child(3) {
    top: 15px;
    left:-7.5px;
    height:4px;
    transform: scale(0.5) rotate(45deg);
}

input[type=checkbox]:checked ~ .menu {
    margin-left: 0px;
}

input[type=checkbox]:checked ~ section {
    margin-left: 200px;
}

a {
  color:#fff;width: 100%;
  display: block;
  text-align: center;
  text-decoration:none;
  }

@media screen and (min-width:1800px) {
  /* CSS Document */

  .nav-toggle {display:none;}

li a::after { content:  '+';transition: .2s;display: inline-block;margin-left:5px  }
li a:hover::after {content:  ' +';transform: rotate(45deg);}
li a:only-child::after { content: ''; }

section {
  top:0;
  background-color:#212121;
  background-size:cover;
	line-height: 32px;
	color: #000;
	word-wrap:break-word !important;
  z-index:10;
  }

p {
	text-align: center;
  }

h1 {
	color: #FFF;
  margin: 100px;
	text-align:center;
	font-size:60px;
  }

nav {z-index:99;position: fixed; width:100%;text-align:center;}

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

nav ul li {
	display:inline-block;
	background-color: rgba(0,0,0,0.4);
  width:170px;
  position: relative;
  }

nav a {
	display:block;
	padding:0 10px;
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover {
	background-color: #000000;
}

/* keeps the dropdown invisible and assign style to list*/
nav ul ul {
	display: none;
	position: absolute;
	top: 60px;
  margin-left:-85px;
}

/* show dropdown 1st 2nd 3rd level on hover */
nav ul li:hover > ul {
	display:inherit;
}

/* 1st level */
nav ul ul li {
	display:list-item;/* no needed in this cases of the below*/
  width:170px;
	float:none;
	position: relative;
}

/* 2nd and 3rd level*/
nav ul ul ul li {
	position: relative;
	top:0px;
	left:85px;
}
}