/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
  color: #222;
}

html {
  font-size: 1em;
  line-height: 1.4;
}
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.preload {
  height:1px;
  width:1px;
  position:absolute;
  left:-100000px;
}

#preload-map {
  background-image:url('../img/map.png');
}

#preload-pins {
  background-image:url('../img/pin-icons.png');
}

#preload-arrows {
  background-image:url('../img/arrows.png');
}

#preload-explore {
  background-image:url('../img/explore-our-campus.png');
}


p {
  margin:0;
}

.container {
  height:525px;
  max-width:1200px;
  min-width:800px;
  margin:auto;
  background:#FFF;
  color:#FFF;
  font-family: "Open Sans",sans-serif;
  position:relative;
  overflow:hidden;
}

.pin-container {
    height:525px;
    width:100%;
    max-width:1200px;
    position: absolute;
    top:0;
    z-index:1;
}

.nav-page {
  height:525px;
  width:100%;
  max-width:1200px;
  position:absolute;
  top:0;
  display:none;
}

.nav-page.active {
  display: block;
}

.start-screen {
    background-color:#fff;
    background-image:url('../img/start.jpg');
    background-position: center right;
    background-repeat: no-repeat;
    cursor:pointer;
    display: none;
}

.video-container {
  display:none;
  background:#000;
  position: absolute;
  z-index: 100;
}

.video-container.alt {
  background:#404040;
}

#debug-trigger {
  position: absolute;
  top:0;
  right:0;
  background:#7fc9d9;
  height:30px;
  width:30px;
  cursor: pointer;
  text-align: center;
  z-index: 99999;
}

#debug-menu {
  position: absolute;
  top: 0;
  right:0;
  height:525px;
  width:0;
  background:#7fc9d9;
  transition: width 0.2s ease;
  z-index: 99999999;
  overflow: hidden;
}

#debug-menu.show {
  width:200px;
}

#debug-options li {
  cursor: pointer;
}

#vid-support {
  position: absolute;
  bottom: 0;
  width:100%;
  height:40px;
  color:#FFF;
  background-color: #333;
  padding: 0 10px;
  font-size:14px;
}

#vid-support p {
  line-height: 40px;
}

#vid-alt {
  color:#FFF;
  cursor: pointer;
  text-decoration: underline;
}

#vid-support i {
  padding:0 10px;
}


.vid-control {
  background-color:#01aef0;
  width:130px;
  height:50px;
  position:absolute;
  bottom:20%;
  cursor:pointer;
  display: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  -moz-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vid-control:hover {
  background-color:#1dc1ff;
}

.vid-control p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  font-size:20px;
  text-align:center;
  margin-top:10px;  
}

#room-title {
  position: absolute;
  top:0;
  right:0;
  height:40px;
  line-height: 40px;
  background-color: #353535;
  z-index: 50;
  padding: 0 20px;
  display: none;
  border-left:5px solid #FFF;
}


/* ==========================================================================
   Slideout and Room Titles
   ========================================================================== */

.slideout {
  background:rgba(0,0,0,0.75);
  bottom: 0;
  color:#FFF;
  font-family: 'Open Sans',sans-serif;
  height: 400px;
  left: 0;
  padding: 20px 30px;
  position: absolute;
  width: 275px;
}

.slideout h1 {
  border-bottom: 1px solid #FFF;
  cursor: default;
  font-size: 1.2em;
  font-weight: 400;
  margin:0 auto 10px;
  padding: 5px;
  text-align: left;
}

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

.slideout li {
  clear: left;
  cursor: pointer;
  display: table; /*Li has to adjust to the width of the content*/
  font-size: 14px;
  margin-bottom: 5px;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  white-space: nowrap;
}

.slideout li:after {
}

.slideout li:hover {
  color:#ffdb93;
}

.slideout ul li.active:before {
  color: #fff;
  content: '\2588'; /*ASCII 219 rectangle*/
  display: block;
  font-size: 8px;
  left: -13px;
  max-height: 0;
  max-width: 0;
  position: relative;
  top: 4px;
} 

.slideout-toggle {
  background-color: #01aef0;
  cursor: pointer;
  height:30px;
  left: -35px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  top:-15px;
  -moz-transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  -transition: background-color 0.2s;
  -webkit-transform: rotate(-90deg);
  transform:  rotate(-90deg);
  width: 100px;
}

.slideout-toggle:hover {
  background-color: #1dc1ff;
  margin-left: -5px;
  width: 110px;
}

#room-title.cat01 {
  border-left:5px solid #4aafaa;
}

#room-title.cat02 {
  border-left:5px solid #ffdd00;
}

#room-title.cat03 {
  border-left:5px solid #ab007f;
}

#room-title.cat04 {
  border-left:5px solid #e87a0a;
}

#room-title.cat05 {
  border-left:5px solid #8bb61e;
}

#room-title p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
}

#close-vid {
  left:0;
  width: 185px;
}

#skip-vid {
  right:0;
}

#explore-our-campus {
  width:257px;
  height:100px;
  background:url('../img/explore-our-campus.png');
  position:absolute;
  cursor: pointer;
  left:0;
  bottom:50px;
  z-index: 100;
}

#explore-our-campus p {
  background-color:#01aef0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  font-size: 20px;
  margin-top: 30px;
  padding: 5px 0;
  -webkit-transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease, color 0.2s ease;
  -moz-transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease, color 0.2s ease;
}

#explore-our-campus:hover p {
  background-color:#1dc1ff;
  margin-top: 28px;
  padding: 7px 0;
}

#explore-our-campus p span {
  font-family: "Open Sans",sans-serif;
  font-weight: 600;
}

#map-screen {
  background-image: url('../img/map.png');
  background-position: center;
  background-repeat: no-repeat;
}

.map-fadeout {
  background: -moz-linear-gradient(left,  rgba(238,239,239,1) 0%, rgba(238,239,239,1) 10%, rgba(238,239,239,0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,239,239,1)), color-stop(10%,rgba(238,239,239,1)), color-stop(100%,rgba(238,239,239,0)));
  background: -webkit-linear-gradient(left,  rgba(238,239,239,1) 0%,rgba(238,239,239,1) 10%,rgba(238,239,239,0) 100%);
  background: -o-linear-gradient(left,  rgba(238,239,239,1) 0%,rgba(238,239,239,1) 10%,rgba(238,239,239,0) 100%);
  background: -ms-linear-gradient(left,  rgba(238,239,239,1) 0%,rgba(238,239,239,1) 10%,rgba(238,239,239,0) 100%);
  background: linear-gradient(to right,  rgba(238,239,239,1) 0%,rgba(238,239,239,1) 10%,rgba(238,239,239,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeefef', endColorstr='#00eeefef',GradientType=1 );

  height:525px;
  width:100px;
  position:absolute;
  left:0;
}

.map-button {
  width:250px;
  height:50px;
  cursor:default;
  background-color: #01aef0;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.map-button:hover {
  color:#ffdb93;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#replay-vid {
  margin-bottom: 5px;
  cursor: pointer;
}

#map-buttons {
  position:absolute;
  z-index:5;
}

#menu-toggle:hover {
  color:#FFF;
}

.map-button p {
  font-family: "Open Sans",sans-serif;
  font-weight: 100;
  font-size: 18px;
  padding: 12px;
}

.map-button i {
    display: inline-block;
    font-size: 32px;
    padding: 8px 14px;
    float:left;
}

.map-button p span {
  font-family: "Open Sans",sans-serif;
  font-weight: 600;
}

.map-pin {
  position:absolute;
  height:37px;
  width:29px;
  margin:-19px 0 0 -14px;
  background-image: url('../img/pin-icons.png');
  background-color: transparent;
  background-repeat: no-repeat;
  /*cursor: pointer;*/
  z-index:10;
  display: none;
}

.map-pin.active {
  display: block;
}

.off-campus {
  background: #01aef0;
  cursor: default;
  height: 50px;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  width: 250px;  
/*  background: #000;
  border-left: solid 3px #f27980;
  border-top: solid 3px #f27980;
  border-bottom: solid 3px #f27980;*/
}

.off-campus:hover, .off-campus.hover {
  background:#1DC1FF;
}

.off-campus p {
  padding: 14px 0 0;
  text-align: center;
}

.map-pin.cat01 {
  background-position: 0 0;
}

.map-pin.cat01:hover, .map-pin.cat01.hover {
  background-position: 0 -37px;
}

.map-pin.cat02 {
  background-position: -29px 0;
}

.map-pin.cat02:hover, .map-pin.cat02.hover {
  background-position: -29px -37px;
}

.map-pin.cat03 {
  background-position: -58px 0;
}

.map-pin.cat03:hover, .map-pin.cat03.hover {
  background-position: -58px -37px;
}


.map-pin.cat04 {
  background-position: -87px 0;
}

.map-pin.cat04:hover, .map-pin.cat04.hover {
  background-position: -87px -37px;
}


.map-pin.cat05 {
  background-position: -116px 0;
}

.map-pin.cat05:hover, .map-pin.cat05.hover {
  background-position: -116px -37px;
}

#tooltip {
  background-color:#000; 
  height:240px;
  width:225px;
  position: absolute;
  top:20px;
  right:50%;
  z-index: 20;
  display:none;
}
  /*margin:-23px 0 0 -18px;*/

#tooltip.tl {
  margin:-23px 0 0 35px;
}

#tooltip.tr {
  margin:-23px 0 0 -255px;
}

#tooltip.bl {
  margin:-218px 0 0 35px;
}

#tooltip.br {
  margin:-218px 0 0 -255px;
}

#tooltip.tl.oc {
  margin:-16px 0 0 35px;
}

#tooltip.tr.oc {
  margin:-16px 0 0 -257px;
}

#tooltip.bl.oc {
  margin:-204px 0 0 35px;
}

#tooltip.br.oc {
  margin:-204px 0 0 -257px;
}

#tooltip h1 {
  color:#01aef0;
  font-family: "Open Sans",sans-serif;
  font-weight: 600;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMUQ1MEU1QTJERjcxMUU0QUE1OUM1NERBMUZDQTYxNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMUQ1MEU1QjJERjcxMUU0QUE1OUM1NERBMUZDQTYxNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjExRDUwRTU4MkRGNzExRTRBQTU5QzU0REExRkNBNjE3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjExRDUwRTU5MkRGNzExRTRBQTU5QzU0REExRkNBNjE3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+o8jlWAAAABRJREFUeNpi+A8GDGDAxIAEAAIMAIatBf2nxhZiAAAAAElFTkSuQmCC);
  background-repeat: repeat-x;
  background-position: bottom;
  margin: 0 10px;
  padding: 10px 0;
  font-size:18px;
  z-index:3;
}

#tooltip p {
  font-family: "warnock-pro",serif;
  padding: 10px;
  font-size:14px;
}

#tt-content-bar {
  background-color: #01aef0;
  height:50px;
  width:100%;
  position:absolute;
  bottom: 0;
}

.tt-content-container {
  margin: auto;
  display: table;
}

.tt-content-container div {
  float:left;
  cursor: pointer;
  font-size: 32px;
  padding: 9px 10px;
  color:#FFF;
}

.tt-content-container div i {
  color:#FFF;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.tt-content-container div i:hover {
  color:#ffdb93;
}

#tt-tail {
  height:36px;
  width:19px;
  background-image:url('../img/arrows.png');
  position:absolute;
}

#tooltip.tl #tt-tail {
  background-position: -19px -36px;
  left:-19px;
  top:0;
}

#tooltip.tr #tt-tail {
  background-position: 0 -36px;
  left:225px;
  top:0;
}

#tooltip.bl #tt-tail {
  background-position: -19px 0;
  left:-19px;
  top:197px;
}

#tooltip.br #tt-tail {
  background-position: 0 0;
  left:225px;
  top:197px;
}

#tt-hoverhelper {
  height:150px;
  width:40px;
  position:absolute;
  z-index:1;
  display: none;
}

#tt-hoverhelper.tl {
  margin:-23px 0 0 0;
}

#tt-hoverhelper.bl {
  margin:-132px 0 0 0;
}

#tt-hoverhelper.tr {
  margin:-23px 0 0 -40px;
}

#tt-hoverhelper.br {
  margin:-132px 0 0 -40px;
}

/*#tooltip #tt-hoverhelper div {
  height:46px;
  width:40px;
  background:rgba(0,255,0,0.5);
  position: absolute;
  cursor: pointer;
}

#tooltip.tl #tt-hoverhelper div, #tooltip.tr #tt-hoverhelper div {
  top:0;
}

#tooltip.bl #tt-hoverhelper div, #tooltip.br #tt-hoverhelper div {
  bottom:0;
}
*/
#area-list {
  width:250px;
  list-style: none;
  margin:0;
  padding:0;
  position: relative;
  overflow: hidden;
}

#area-list li {
  font-family: "Open Sans",sans-serif;
  font-weight:100;
  /*background:#333333;*/
  color:#8d8d8d;
  height:65px;
  /*margin-left: -250px;*/
  width: 250px;
  cursor: pointer;
  border-bottom:1px solid #474747;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
  padding: 21px 0 21px 50px;
  position:absolute;
  top:-65px;
}

#area-list li:last-child {
  border-bottom:none;
}

#area-list li.two-line {
  padding: 10px 0 21px 50px;
}


.key-circle {
  height:22px;
  width:22px;
  margin-right:20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background:#4a4a4a;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  position: absolute;
  left: 15px;
  top: 21px;
}


#area-campus {
  background: rgb(51,51,51);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzRhYWZhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YWFmYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 96%, rgba(74,175,170,1) 96%, rgba(74,175,170,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(96%,rgba(51,51,51,1)), color-stop(96%,rgba(74,175,170,1)), color-stop(100%,rgba(74,175,170,1)));
  background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(74,175,170,1) 96%,rgba(74,175,170,1) 100%);
  background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(74,175,170,1) 96%,rgba(74,175,170,1) 100%);
  background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(74,175,170,1) 96%,rgba(74,175,170,1) 100%);
  background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(74,175,170,1) 96%,rgba(74,175,170,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#4aafaa',GradientType=1 );
}

#area-campus.active .key-circle {
  background:#4aafaa ;
}

#area-accom {
  background: rgb(51,51,51);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2ZmZGQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRkMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 96%, rgba(255,221,0,1) 96%, rgba(255,221,0,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(96%,rgba(51,51,51,1)), color-stop(96%,rgba(255,221,0,1)), color-stop(100%,rgba(255,221,0,1)));
  background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(255,221,0,1) 96%,rgba(255,221,0,1) 100%);
  background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(255,221,0,1) 96%,rgba(255,221,0,1) 100%);
  background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(255,221,0,1) 96%,rgba(255,221,0,1) 100%);
  background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(255,221,0,1) 96%,rgba(255,221,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffdd00',GradientType=1 );
}

#area-accom.active .key-circle {
  background:#ffdd00;
}

#area-dep-human {
  background: rgb(51,51,51);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2FiMDA3ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYjAwN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 96%, rgba(171,0,127,1) 96%, rgba(171,0,127,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(96%,rgba(51,51,51,1)), color-stop(96%,rgba(171,0,127,1)), color-stop(100%,rgba(171,0,127,1)));
  background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(171,0,127,1) 96%,rgba(171,0,127,1) 100%);
  background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(171,0,127,1) 96%,rgba(171,0,127,1) 100%);
  background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(171,0,127,1) 96%,rgba(171,0,127,1) 100%);
  background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(171,0,127,1) 96%,rgba(171,0,127,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ab007f',GradientType=1 );
}

#area-dep-human.active .key-circle {
  background:#ab007f;
}

#area-dep-scien {
  background: rgb(51,51,51);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2U4N2EwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlODdhMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 96%, rgba(232,122,10,1) 96%, rgba(232,122,10,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(96%,rgba(51,51,51,1)), color-stop(96%,rgba(232,122,10,1)), color-stop(100%,rgba(232,122,10,1)));
  background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(232,122,10,1) 96%,rgba(232,122,10,1) 100%);
  background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(232,122,10,1) 96%,rgba(232,122,10,1) 100%);
  background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(232,122,10,1) 96%,rgba(232,122,10,1) 100%);
  background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(232,122,10,1) 96%,rgba(232,122,10,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#e87a0a',GradientType=1 );
}

#area-dep-scien.active .key-circle {
  background:#e87a0a;
}

#area-dep-hals {
  background: rgb(51,51,51);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzhiYjYxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YmI2MWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 96%, rgba(139,182,30,1) 96%, rgba(139,182,30,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(96%,rgba(51,51,51,1)), color-stop(96%,rgba(139,182,30,1)), color-stop(100%,rgba(139,182,30,1)));
  background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(139,182,30,1) 96%,rgba(139,182,30,1) 100%);
  background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(139,182,30,1) 96%,rgba(139,182,30,1) 100%);
  background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(139,182,30,1) 96%,rgba(139,182,30,1) 100%);
  background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 96%,rgba(139,182,30,1) 96%,rgba(139,182,30,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#8bb61e',GradientType=1 );
}

#area-dep-hals.active .key-circle {
  background:#8bb61e;
}

#area-list li:hover, #area-list li.active {
    color:#FFF;
}

#tourLoadScreen {
  height:100%;
  width:100%;
  background:#333333;
  position: absolute;
  z-index: 99999;
  display: none;
}

#tourLoadScreen i {
  color: #f5f4f2;
  text-align: center;
  font-size: 100px;
  margin: 175px 0 20px;  
}


#tourLoadScreen p {
  font-family: "Open Sans",sans-serif;
  font-weight: 100;
  color: #f5f4f2;
  text-align: center;
  font-size: 36px;
}

#tourLoadScreen.cat01 i, #tourLoadScreen.cat01 p {
  color: #4aafaa;
}

#tourLoadScreen.cat02 i, #tourLoadScreen.cat02 p {
  color: #ffdd00;
}

#tourLoadScreen.cat03 i, #tourLoadScreen.cat03 p {
  color: #ab007f;
}

#tourLoadScreen.cat04 i, #tourLoadScreen.cat04 p {
  color: #e87a0a;
}

#tourLoadScreen.cat05 i, #tourLoadScreen.cat05 p {
  color: #8bb61e;
}

.spin {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
display:block;
}
-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


/* ==========================================================================
   IE classes
   ========================================================================== */

.lte8 #tour-frame {
  position: absolute;
}

.lte8 .tt-content-container div {
  padding:5px 10px;
}

.lte9 #area-list li {
  filter: none;
  background:#353535;
}

.lte9 #area-campus {
  border-right: 5px solid #4aafaa;
}

.lte9 #area-accom {
  border-right: 5px solid #ffdd00;
}

.lte9 #area-dep-human {
  border-right: 5px solid #ab007f;
}

.lte9 #area-dep-scien {
  border-right: 5px solid #e87a0a;
}

.lte9 #area-dep-hals {
  border-right: 5px solid #8bb61e;
}



/* ==========================================================================
   Touch classes
   ========================================================================== */

body.overflow-hidden {
  overflow: hidden;
}

.touch-container {
  max-width:640px;
  margin:auto;
  font-family: "Open Sans",sans-serif;
  background-color: #FFF;
  /*background-color: #F1F1F1;*/
  overflow: hidden;
  height: 500px;
}

.touch-container h1 {
  font-weight: 600;
}

.touch-container img {
  width:100%;
}

.touch-container .logo {
  height:229px;
  background-image:url('../img/liv-logo.png');
  background-size:contain;
  background-repeat: no-repeat;
}

.touch-container .welcome-pic {
  height:351px;
  width:640px;
  background-color: #FFF;
  background-image:url('../img/touch/welcome.jpg');
  background-size:contain;
  background-repeat: no-repeat;
}

.touch-content {
  position: relative;
}

.touch-container .main-cat {
  list-style: none;
  margin:60px 0 0;
  padding:0;
}

.touch-container .main-cat li {
  position: relative;
  width:76.72%;
  margin:auto;
  background-color:#01aef0;
  padding:20px;
  font-size:25px;
  color:#FFF;
  text-align: center;
  margin-top:20px;
  cursor: pointer;
}

.touch-container .main-cat li.hass-button,
.touch-container .main-cat li.sae-button,
.touch-container .main-cat li.hals-button {
  padding:3px 20px 2px;
}

.touch-container .main-cat i {
  position: absolute;
  left: 30px;
  top:27px;
}

.touch-container .main-cat li.list-intro-vid {
  background-color: #ff59a3;
}

.touch-container .touchCat {
  list-style: none;
  margin:0;
  padding:0;
  position: absolute;
  width:640px;
  left:640px;
  top:100px;
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

.touch-container .touchCat.active {
  left: 0;
}

.touch-container .touchCat h1 {
  text-align: center;
  color:#333;
}

.touch-container .touchCat li {
  background-color: #333333;
  font-family: 'Open Sans', sans-serif;
  color:#fff;
  margin:20px auto 0;
  cursor: pointer;
  width:90%;
  font-size: 20px;
}

.touch-container .touchCat li .icon-arrow-toggle {
  display: block;
  font-size:64px;
  margin: 20px 0 0 20px;
}

.touch-container .touchCat li .icon-arrow-toggle:before {
  content: "\e605";
}

.touch-container .touchCat li.active .icon-arrow-toggle:before {
  content: "\e604";
}

.touch-container .touchCat li h2 {
  font-weight: 100;
  padding:35px 0 0 10px;
  float:left;
  margin:0;
  font-size:24px;
}

.touch-container .touchCat li.active h2 {
  /*font-weight: 600;*/
}

.touch-container .touchCat li .li-control {
  height:100px;
  width:100px;
  background-color: #707070;
  float:left;
}

.touch-container .touchCat li.tour-list-container {
  margin-top:0;
  display:none;
}

.touch-container .touchCat ul.tour-list {
  margin:0;
  padding:20px;
  background-color: #333333;
  list-style: none;
}

.touch-container .touchCat ul.tour-list li {
  width:100%;
  margin-top:0 0 20px 0;
  background:#01aef0;
  height:75px;
  font-size: 24px;
}

.touch-container .touchCat ul.tour-list li i {
  float:left;
  margin: 14px 0 0 20px;
}

.touch-container .touchCat ul.tour-list li p {
  float: left;
  line-height: 75px;
  margin: 0 0 0 20px;
  max-width: 430px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.touch-container .touchCat ul.tour-list li i {
  display:inline;
  font-size:46px;
}

#touch-start {
  position: absolute;
  left:0;
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

.touch-360.long p {
  font-family: 'Open Sans Condensed', sans-serif;
}

#touch-start.hidden {
  left:-640px;
}
#top-nav {
  margin:auto;
  padding:0;
  text-align: center;
  display: table;
}

#top-nav li {
  cursor: pointer;
  height:95px;
  width:95px;
  background-color: #01aef0;
  color:#FFF;
  float:left;
  list-style: none;
  font-size: 50px;
  /*margin: 0 20px;*/
  margin: 0 12px;
  padding: 15px;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  -moz-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#top-nav li.active {
  background-color: #ff59a3;
}

#fullscreen-content {
  height:100%;
  width:100%;
  position: fixed;
  z-index: 99;
  display: none;
}

#fullscreen-iframe {
  height:100%;
  width:100%;
  z-index: 110;
  background-color:#000;
}

#fullscreen-iframe.youtube {
  height:100%;
  padding:120px 0 0;
  width:100%;
  z-index: 110;
}

#fullscreen-close {
  height:60px;
  width:60px;
  position: absolute;
  top:10px;
  right:10px;
  background:#01aef0;
  z-index: 2147483647;
  cursor: pointer;
  color:#FFF;
  font-size:30px;
  padding: 12px 0 0 16px;
}

.iphone #fullscreen-close {
  height:40px;
  width:40px;
  top:5px;
  right:5px;
  font-size:20px;
  padding: 8px 0 0 10px;
}

#touch-vid-support {
  background-color: #000;
  position: absolute;
  top:12px;
  left:10px;
  color: #FFF;
  padding-left:60px;
  font-size: 22px;
  display: none;
}

#touch-vid-support i {
  position: absolute;
  left:10px;
  top:14px;
  font-size: 36px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

/*.hidden {
    display: none !important;
    visibility: hidden;
}*/

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

.ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
  content: "";
}

pre,
    blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}

thead {
  display: table-header-group;
 /* h5bp.com/t */;
}

tr,
    img {
  page-break-inside: avoid;
}

img {
  max-width: 100% !important;
}

@page {
  margin: 0.5cm;
}

p,
    h2,
    h3 {
  orphans: 3;
  widows: 3;
}

h2,
    h3 {
  page-break-after: avoid;
}
}