@import url("//hello.myfonts.net/count/353400");
@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 14px/18px 'AvertaPE-Regular', Arial, sans-serif;
	color: #584635;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

.resizeimg {max-width: 100%;height: auto;}

.flexmiddle {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}
.animatein {visibility:hidden}

a {color:#C70C0F}
a:hover {text-decoration:none}

b {font-family:'AvertaPE-SemiBold';font-weight:normal}

/**** nav ****/
.navcontainer {width:50%;height:100vh;position:fixed;top:0;left:0}
.ienavcontainer {display:none}
.introcontainer {width:100%}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
	.navcontainer {display:none !important}
	
.ienavcontainer  {width:50%;height:100vh;position:fixed;top:0;left:0;
display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;}

.ienav {background:url(../img/ui/ienav/home.png) no-repeat 50% 50%;background-size:contain;width:80%;height:80%;position:relative;
display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;}

.ienavbuttons polygon {cursor:pointer;cursor:hand}

.s0 .ienav {background-image:url(../img/ui/ienav/home.png)}
.s1 .ienav {background-image:url(../img/ui/ienav/buses.png)}
.s2 .ienav {background-image:url(../img/ui/ienav/carsharing.png)}
.s3 .ienav {background-image:url(../img/ui/ienav/walking.png)}
.s5 .ienav {background-image:url(../img/ui/ienav/news.png)}
.s4 .ienav {background-image:url(../img/ui/ienav/contacts.png)}

.ienavhover {position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat 50% 50%;background-size:contain;z-index:1}
.ienavbuttons {position:relative;z-indeX:2}

.ienavhover.home {background-image:url(../img/ui/ienav/home.png)}
.ienavhover.buses {background-image:url(../img/ui/ienav/buses.png)}
.ienavhover.carsharing {background-image:url(../img/ui/ienav/carsharing.png)}
.ienavhover.walking {background-image:url(../img/ui/ienav/walking.png)}
.ienavhover.news {background-image:url(../img/ui/ienav/news.png)}
.ienavhover.contacts {background-image:url(../img/ui/ienav/contacts.png)}

 }


.navcubes {
	
  width: 100%;
  height: 100vh;
  perspective: 100000px;
	perspective-origin: 50% 50%;
}

.cube {
  width: 0;
  height: 0;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-4vw);
	transition: transform 0.8s;
	transform-origin: 4.5vw 4.5vw 4.5vw;
	text-align:center;
	font-family:'AvertaPE-Bold';font-size:20px;line-height:24px;
}

.cube__face {
  position: absolute;
  width: 9.8vw;
  height: 9.8vw;
  border:0.2vw solid #584635;background:url(../img/ui/cardbg.jpg);
	display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
	cursor:pointer;cursor:hand
}


.cube__face--front  { transform: rotateY(  0deg) translateZ(5vw); background-position:-50px -50px}
.cube__face--right  { transform: rotateY( 90deg) translateZ(5vw); }
.cube__face--back   { transform: rotateY(180deg) translateZ(5vw); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(5vw); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(5vw); background-position:-100px -100px}
.cube__face--bottom { transform: rotateX(-90deg) translateZ(5vw); }

.cube  { transform: rotateX(   -45deg) rotateY(   45deg) rotateZ(   0deg) translateZ(-5vw) ; }
.cube:hover { transform:  rotateX(   -45deg) rotateY(   45deg) rotateZ(   360deg) translateZ(-5vw); }

.cube.welcome {top:20vw;left:17vw}
.cube.buses {top:20vw;left:28.2vw}
.cube.carsharing {top:29.7vw;left:22.55vw}
.cube.walking {top:29.7vw;left:33.82vw}
.cube.contact {top:39.4vw;left:28.2vw}

.cube.welcome {top:calc((55vh - (33.3vw / 2)) + 0vw);left:16vw}
.cube.buses {top:calc((55vh - (33.3vw / 2)) + 0vw);left:30.2vw}
.cube.carsharing {top:calc((55vh - (33.3vw / 2)) + 12.1vw);left:23.1vw}
.cube.walking {top:calc((55vh - (33.3vw / 2)) + 12.1vw);left:37.3vw}
.cube.news {top:calc((55vh - (33.3vw / 2)) + 24.2vw);left:16vw}
.cube.contact {top:calc((55vh - (33.3vw / 2)) + 24.2vw);left:30.2vw}


.redface {color:#fff}
.redface:before {content:"";display:block;width:100%;height:100%;background:#C70C0F;position:absolute;top:0;left:0;z-index:-1;mix-blend-mode: multiply;transition: all 0.8s}
.cube:hover .redface:before {background-color:#009FE3}
.s0 .welcome .redface:before,
.s1 .buses .redface:before,
.s2 .carsharing .redface:before,
.s3 .walking .redface:before,
.s4 .contact .redface:before,
.s5 .news .redface:before {background-color:#009FE3}

.topface:before {content:"";display:block;width:0.2vw;height:100%;background:#584635;position:absolute;top:0;left:calc(50% - 0.1vw)}
.alttop:before {width:100%;height:0.2vw;left:0;top:calc(50% - 0.1vw)}

.picface:before {content:"";display:block;width:100%;height:100%;background:50% 50% no-repeat;background-size:70% auto}
.welcome .picface:before {background-image:url(../img/ui/navicons/welcome.svg)}
.buses .picface:before {background-image:url(../img/ui/navicons/buses.svg)}
.carsharing .picface:before {background-image:url(../img/ui/navicons/car.svg)}
.walking .picface:before {background-image:url(../img/ui/navicons/walking.svg)}
.news .picface:before {background-image:url(../img/ui/navicons/news.svg);background-size:50% auto}
.contact .picface:before {background-image:url(../img/ui/navicons/contact.svg)}


.pagecontent {width:50%;margin-left:50%;min-height:100vh}
.pagecontent {width:50%;margin-left:50%;min-height:100vh}
.contentblock {padding:40px 40px 40px 80px;max-width:800px}
.pagetitle {position:relative;padding:40px 40px 40px 80px;text-transform:uppercase}

h1 {font-size:72px;font-family:'AvertaPE-SemiBold';font-weight:normal;line-height:72px;text-align:center;}
h1 img {margin-top:40px;width:75%}
h2 {font-size:48px;font-family:'AvertaPE-SemiBold';font-weight:normal;line-height:52px;color:#fff;margin:0;max-width:800px}
h2 span {color:#584635}
h3 {position:absolute;top:40px;left:80px;font-size:14px;font-family:'AvertaPE-SemiBold';font-weight:normal;line-height:18px;color:#C70C0F;margin:0;text-transform:uppercase}
h4 {font-size:18px;font-family:'AvertaPE-SemiBold';font-weight:normal;line-height:22px;color:#C70C0F;margin:0}

.footer {background:#C70C0F;padding:20px;height:30px}
.footer .bigbox {float:left;height:30px;width:auto}
.footer .footerlogo {float:right;height:30px;width:auto}

/* #Page Styles
================================================== */

/**** welcome ****/
.pageintro {height:100vh;text-align:center;position:relative;}
.pageintro p {margin:0 10vw 20px 10vw;width:calc(100% - 20vw)}
.homemaplink {position:absolute;bottom:20px;left:0;width:100%;text-align:center;cursor:pointer;cursor:hand}
.homemaplink:hover {text-decoration:underline}
.homemaplink:after {content:'';display:inline-block;background:url(../img/content/home/down.svg) 50% 50% no-repeat;width:20px;height:20px;position:relative;top:5px}
.homemap {width:100%;text-align:center}
.homemap img {margin:0 auto}

/**** buses and trains ****/
.s1 .pagetitle {background:#E58F74}
.s1 h2 {margin-top:20vh}
.mapkey {padding-top:20px}
.halfcol {width:calc(50% - 20px);margin-right:20px;float:left;margin-top:10px}
.mapkey ul {list-style-type:none;margin:0}
.mapkey ul li {margin:4px 0;padding-left:0}
.mapkey ul li:before {content:"";display:block;width:30px;height:4px;background:#66ac2f;float:left;position:relative;top:7px;margin-right:8px}
.mapkey ul li.onefivefive:before {background-color:#85b5bd}
.mapkey ul li.leicester:before {background-color:#0078b0}
.mapkey ul li.nottingham:before {background-color:#de890e}
.mapkey ul li.express:before {background-color:#c70c0f}
.mapkey ul li.airway:before {background-color:#312783}

/**** carsharing ****/
.s2 .pagetitle {background:#B4DDE0}
.s2 h2 {margin-top:20vh}
img.carsharing {max-width:500px;margin:20px 0 40px 0}

/**** walking and cycling ****/
.s3 .pagetitle {background:#CDC2B8}
.s3 h2 {margin-top:20vh}

.mapkey ul li.footpath:before {background-color:#66ac2f}
.mapkey ul li.autumn:before {background:url(../img/content/walking/autumnkey.svg) left center repeat-x}
.mapkey ul li.lessexperienced:before {background-color:#005457}
.mapkey ul li.intermediate:before {background-color:#85b5bd}
.mapkey ul li.experienced:before {background-color:#991a30}

/**** news ****/
.s5 .pagetitle {background:#CDC2B8}
.s5 h2 {margin-top:20vh}

.newspic {width:10vw;height:10vw;float:left;margin-right:20px;background:50% 50% no-repeat;background-size:cover}
.newstext {float:left;width:calc(100% - (10vw + 20px))}
.newstext h4 {margin-bottom:10px}
.newstext h4 .date {font-weight:400;font-family:'AvertaPE-Regular';font-size:12px;color:#584635}
.newstext p:last-child {margin:0}
.newsdivide {width:100%;height:1px;clear:both;margin:40px 0;background:#55402f}


/**** contacts ****/
.s4 .pagetitle {background:#D65539}
.s4 h2 {margin-top:20vh}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}


.revealOnScroll.fadeInUp {
  opacity: 0;
}

/**** slicknav ****/
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 767px) {
	#nav {
		display:none;
	}
	
	.slicknav_menu {
		display:block;z-index:1000;position:fixed;top:0;right:0;padding:0;width:100%;height:0;
	}
	.slicknav_menu .vmiddle {position: relative;top: 0;  -webkit-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);}
	.slicknav_menu .logo {display:none}
	.slicknav_btn {margin:0;background:#666666;position:fixed;top:30px;right:30px;border-radius:0;padding:8px 5px 8px 5px;height:35px;z-index:600}
	.slicknav_menu .slicknav_menutxt {font-family:"Lato", Arial, Helvetica, sans-serif;letter-spacing:0.1em;color:#fff;text-shadow:none;font-weight:300}
	.slicknav_menu .slicknav_icon {width:30px}
	.slicknav_menu .slicknav_icon-bar {background-color:#aaaaaa;box-shadow:none;height:3px;width:30px;margin:5px 0;transition:0.2s;opacity:1;position:relative}
	.slicknav_menu .slicknav_icon-bar:nth-of-type(1) {margin-top:0}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(1) {opacity:1;transform: rotate(45deg);top:8px}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(2) {opacity:0;transform: rotate(-135deg);}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(3) {opacity:1;transform: rotate(-45deg);top:-8px}
	.slicknav_btn:hover .slicknav_icon-bar {background-color:#fff}
	.slicknav_nav {width:100%;background:#fff}
	.slicknav_nav a {color:#fff;display:inline-block;padding:8px 0;width:auto;margin:0}
	.slicknav_nav ul {margin:0}
	.slicknav_nav li {margin:0 !important;text-align:center;text-transform:uppercase;letter-spacing:0.1em}
	.slicknav_nav a:hover {text-decoration:underline}
	
	.slicknav_nav {background:#383737}
}

/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		h1 {font-size:56px;line-height:56px}
		.cube {font-size:18px;line-height:22px;}
}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.navcontainer {z-index:5000;height:100vh;background:rgba(255,255,255,0.9);overflow:hidden;width:0;transition: width 0.2s;left:auto;right:0;
		display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;}
		
		.menuopen .navcontainer {width:100%}
		
		.navcubes {
	
		  width: 100vw;
		  height: 100vh;
		  perspective:none;
			perspective-origin:0 0 0;
		}

		.cube {
		  width: 100%;
		  height: auto;
		  position: relative;
		  transform-style:flat;
		  transform: translateZ(0);
			transform-origin: 0 0 0;
			text-align:center;
		font-size:20px;line-height:24px;
			background:none;
			text-decoration:none;
			display:block;
			
		}

		.cube__face {
		  position: relative;
		  width: 100%;
		  height: auto;
		  border:0;
			background-image:none
		}
		.cube__face:not(.redface) {display:none}
		.redface:before {display:none}
		.redface {color:#C70C0F;display:block;padding:20px 0;cursor:pointer;cursor:hand}
		.cube:hover {text-decoration:underline}
		
		.cube__face--front, .cube__face--right, .cube__face--back, .cube__face--left, .cube__face--top, .cube__face--bottom  { transform: rotateY(  0deg) translateZ(0vw);}


.cube  { transform: rotateX(   0deg) rotateY(   0deg) rotateZ(   0deg) translateZ(0vw) ; }
.cube:hover { transform:  rotateX(   0deg) rotateY(   0deg) rotateZ(   0deg) translateZ(0vw); }

.cube.welcome, .cube.buses, .cube.carsharing, .cube.walking, .cube.news, .cube.contact {top:auto;left:auto}
		.s0 .welcome .redface,
		.s1 .buses .redface,
		.s2 .carsharing .redface,
		.s3 .walking .redface,
		.s4 .contact .redface {text-decoration:underline}
		
		/**** navbutton ****/
		.navbutton {position:fixed;top:0;right:0;z-index:6000;display:block;width:60px;height:60px;cursor:pointer;cursor:hand;}
		/*.navbutton:before {content:'';display:block;width:60px;height:60px;background:#0aa}*/
		.wrap {
			perspective: 1000px;
			perspective-origin: 50% 50%;
		/*	position:absolute;top:0;right:0*/
		}

		.navcube {
			position: relative;
			width: 60px;
			transform-style: preserve-3d;
			-webkit-transition: transform 0.2s; /* Safari */
			transition: transform 0.2s;
			transform-origin: top center;
		}

		.menuopen .navcube {transform:rotateY(-90deg);}
		

		.navcube div {
			position: absolute;
			width: 56px;
			height: 56px;
		}

		.navcube .right {
			transform: rotateY(-270deg) translateX(30px);
			transform-origin: top right;
			background:#5f4c39;border:2px solid #fff
		}
		.navcube .front {
			transform: translateZ(30px);
			background:rgba(255,255,255,0.8);border:2px solid #5f4c39
		}
		.navcube .front:hover {background:#f7f5f3}

		.navbutton .openbutton {width:20px;height:20px;padding:18px;position:relative;float:left}
		.navbutton .openbutton .icon {width:20px;height:2px;background:#5f4c39;position:absolute;top:26px}
		.navbutton .openbutton .icon:before {content:'';display:block;width:20px;height:2px;background:#5f4c39;position:absolute;top:-8px}
		.navbutton .openbutton .icon:after {content:'';display:block;width:20px;height:2px;background:#5f4c39;position:absolute;top:8px}
		.navbutton .closebutton {width:20px;height:20px;padding:18px;position:relative;float:left}
		.navbutton .closebutton .icon {width:0px;height:0px;background:#fff;position:absolute;top:28px}
		.navbutton .closebutton .icon:before {content:'';display:block;width:20px;height:2px;background:#fff;position:absolute;top:0px;-ms-transform: rotate(45deg); /* IE 9 */
			-webkit-transform: rotate(45deg); /* Safari */
			transform: rotate(45deg);}
		.navbutton .closebutton .icon:after {content:'';display:block;width:20px;height:2px;background:#fff;position:absolute;top:0px;-ms-transform: rotate(-45deg); /* IE 9 */
			-webkit-transform: rotate(-45deg); /* Safari */
			transform: rotate(-45deg);}

		.pagecontent {width:100%;margin:0}
		.mapkey {padding-left:20px}

		
}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.pageintro {min-height:100vh;padding:15vh 0}
		
		h1 {font-size:36px;line-height:36px}
		h2 {font-size:24px;line-height:28px}
		
		.redface {padding:5px 0}
		.pagetitle {padding-left:20px}
		.contentblock {padding-left:20px}
		h3 {left:20px}
		
		.footer {height:auto;text-align:center}
		.footer .bigbox {float:none;margin-bottom:20px}
		.footer .footerlogo:before {content:"";display:block;width:100%}
		.footer .footerlogo {float:none;clear:both;margin:0 20px 20px 20px}
		
		/**** news ****/
		.newspic {width:100%;height:200px;float:none;margin:0 0 20px 0}
		.newstext {float:none;width:100%}
		.newstext h4 {margin-bottom:10px}
		.newsdivide {width:100%;height:1px;clear:both;margin:40px 0;background:#55402f}
}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {font-family: 'AvertaPE-Bold';src: url('/webfonts/353400_0_0.eot');src: url('/webfonts/353400_0_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/353400_0_0.woff2') format('woff2'),url('/webfonts/353400_0_0.woff') format('woff'),url('/webfonts/353400_0_0.ttf') format('truetype');}
  
@font-face {font-family: 'AvertaPE-Extrabold';src: url('/webfonts/353400_1_0.eot');src: url('/webfonts/353400_1_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/353400_1_0.woff2') format('woff2'),url('/webfonts/353400_1_0.woff') format('woff'),url('/webfonts/353400_1_0.ttf') format('truetype');}
  
@font-face {font-family: 'AvertaPE-Regular';src: url('/webfonts/353400_2_0.eot');src: url('/webfonts/353400_2_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/353400_2_0.woff2') format('woff2'),url('/webfonts/353400_2_0.woff') format('woff'),url('/webfonts/353400_2_0.ttf') format('truetype');}
  
@font-face {font-family: 'AvertaPE-Semibold';src: url('/webfonts/353400_3_0.eot');src: url('/webfonts/353400_3_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/353400_3_0.woff2') format('woff2'),url('/webfonts/353400_3_0.woff') format('woff'),url('/webfonts/353400_3_0.ttf') format('truetype');}