/* @override 
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1478628298
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1478630653
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1478634429
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1478634591
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1478700264
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479570478
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479573148
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479660367
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479662298
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479664937
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479685307
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479810123
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479827196
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479827538
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479832105
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479834151
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1479901284
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1481982114
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1482096228
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1483189699
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1483659206
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1483882999
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1483976127
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1484155647
	http://localhost:8888/joecharlotte/themes/simple/css/nav-pop.css?m=1484482027
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1579262919
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1579280748
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1579282430
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1579284279
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1580988650
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1580991635
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1580999567
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1581271789
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1581548239
	http://localhost:8888/jc2020/themes/simple/css/nav-pop.css?m=1581682120
	http://localhost:8888/jc/_resources/themes/joeandcharlotte/css/nav-pop.css?*
	http://www.jc.joeandcharlotte.co.uk/_resources/themes/joeandcharlotte/css/nav-pop.css?*
*/

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.c-hamburger {
  display: block;
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 0;
  width: 10%;
  min-width: 150px;
  height: 42px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
cursor: url('../images/point.png') 10 5, default;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
	top: 10vh;
}

.c-hamburger:focus {
  outline: none;
}
a:hover,
.c-hamburger:hover {
	 cursor: url('../images/point.png') 10 5, default;
	 	}
.c-hamburger:active,
#footer div.scrollto h5:active,
#footer h4 a:active {
	 cursor: url('../images/grab-down.png') 10 5, default;
}
.c-hamburger span {
  display: block;
  position: absolute;
  right: 18px;
  height: 20px;
  background: url(../images/menu.svg) center center no-repeat transparent;
	background-size: contain;
  transition: all ease 0.4s;
  top: 10px;
  left: 18px;
  overflow: visible;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: black;
  content: "";
  transition:all ease 0.4s;
  opacity: 0;
}

.c-hamburger span::before {
  top: -16px;
}

.c-hamburger span::after {
  bottom: -16px;
}

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
 background-color: transparent;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: transparent;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
	background-color: black;
	opacity: 1;
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
	background-color: black;
	opacity: 1;
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}


nav {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;
}
.push-wrap{
	//min-height: 1000px;
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;

}
.site-wrap{
	width:100vw;
	height:100%;
}
.ContactPage .site-wrap {
	background: #ffacda;
	position: relative;
		overflow: hidden;
}
#body-nav{
	position:fixed;
	overflow:hidden;
	top:0;
	background:transparent;
	text-align:left;
	display:block;
	-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
	-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease;
	z-index: -1;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	height:100%;
	width:100%;
	text-align:center;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;
	opacity: 0;
}

.show-nav #body-nav{
opacity: 1;
	z-index:99999;
	background-image: url(../images/grade.jpg);
	background-size:cover;
		-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease;
}
	
	.hide-nav #body-nav{background:transparent;height:100%;width:100%;z-index:1;
			-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease;
	}
	
	#body-nav ul{position:absolute;left:0%;width:100%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateY(-50%);}
	
	#body-nav ul li a{display:block;text-decoration:none!important;color:#000;opacity:0;border:none;
	-webkit-transition:all 700ms ease;
	-moz-transition:all 700ms ease;
	transition:all 700ms ease;
	background-color: transparent;
	 cursor: url('../images/point.png') 10 5, default;
}

#body-nav ul li a img {
	width: 100%;
	max-width: 300px;
	-webkit-backface-visibility: hidden;
	outline: 1px solid transparent;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;
}
#body-nav ul li a img:hover {
	//width: 35%;
	max-width: 280px;
	cursor: url('../images/point.png') 10 5, default;
	}
	
#body-nav ul li a{
	margin-bottom: 10px;
	text-transform: lowercase;
	text-align: left;
	text-indent: 44px;
		cursor: url('../images/point.png') 10 5, default;
		transition: all ease 0.5s;
	display: block;
	float: left;
	clear: both;
	font: 10vw/9vw BodyGrotesqueLargeBold;
}
	#body-nav ul li a:hover{
	text-indent: 54px;
	color: white;
}
	.show-nav #body-nav ul li a{opacity:1;
	}
	.toggle-nav{
	position:fixed;z-index:99999;
	cursor: url('../images/point.png') 10 5, default;
	left: 8vw;
	transition: 
	all ease 0.4s;
	}
.move.toggle-nav{
	left: -20px;
	transform: rotate(-90deg);
	}
.scroll-section h1 {
	font-size: 8vw;
	line-height: 9vw;
	padding-top: 20%;
}
	
	.toggle-nav .option{left:auto;right:125%;}

@media only screen and (max-width: 680px) { 
#body-nav ul li a img {
	width: 60% !important;
	}
	.c-hamburger {
  display: block;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
cursor: url('../images/point.png') 10 5, default;

transition: 
	all ease 0.4s;
	top: 43px;
		left: auto;
		right: 0;
		float: right;
	}
.move.toggle-nav{
	right: -30px;
	left: auto;
	transform: rotate(90deg);
	}
}

@media only screen and (max-height: 460px) { 
#body-nav ul li a img {
	width: 26% !important;
	}
}