/**
 * Place your custom styles here.
 */
.bg-aqua {background-color: #4DBDAD; color: #FFF;}
.bg-red {background-color: #FE491A; color: #FFF;}
.bg-yellow {background-color: #F7B733; color: #FFF;}
.bg-gray {background-color: #DFDCE3; color: #FFF;}
.text-shadow-aqua {text-shadow: 3px 3px 0 #4DBDAD, 6px 6px 0 rgba(0, 0, 0, 0.15);}
.text-shadow-red {text-shadow: 3px 3px 0 #FE491A, 6px 6px 0 rgba(0, 0, 0, 0.15);}
.text-shadow-yellow {text-shadow: 3px 3px 0 #F7B733, 6px 6px 0 rgba(0, 0, 0, 0.15);}
.text-shadow-gray {text-shadow: 3px 3px 0 #DFDCE3, 6px 6px 0 rgba(0, 0, 0, 0.15);}
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {font-weight: 800;}
.h2, h2 {font-size: 46px;}
.well {
	border: 0px solid #e3e3e3;
	-webkit-box-shadow: none;
	box-shadow: none);
}
.text-serif {font-family: 'Grand Hotel', cursive;}
.margin-reset {margin: 0px 0px 0px 0px !important;}
.padding-reset {margin: 0px 0px 0px 0px !important;}
.text-shadow {text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15)}
h1 small {color: #FFF; font-weight: 600;}
.line-height-reset: {line-height: 0px !important;}
.footer {margin-top: 0px;padding-top: 25px;padding-bottom: 50px;border-top: 0px solid #E5E5E5;background-color: #39968a;}
#site-title{font-size: 75px; margin: 50px 0 !important;}
a {color: #fff; font-weight: 800;}
a:hover {color: #FFF; text-decoration: none;}
.bg-yellow a:hover {color: #FE491A;}
.page-header {
	border-bottom: 0px solid #eee;
	background-color: #337ab7;
	border-radius: 10px 10px 0px 0px;
	padding: 5px 25px 7px 25px;
	display: inline-block;
	margin-bottom: 0px;
	font-size: 48px;
	text-transform: uppercase;
	text-shadow: 3px 3px 0 #337ab7, 6px 6px 0 rgba(0, 0, 0, 0.15);}
}
.content {
	background-color: #FFF;
	color: #333;
	padding: 50px 25px;
	border-radius: 0px 10px 10px 10px;
	z-index: 0; /*Was -1, changed to 0, did this break anything?*/
	font-size: 18px;
}
.vizmat-body {
	background-color: #FFF;
	border-radius: 0px 4px 4px 4px;
	color: #333;
	margin: 0 0 50px 0;
	padding: 25px;
	font-size: 21px;
}
.vizmat-body ol, .vizmat-body ul {
	padding-left: 0px;
	font-size: 21px;
}
.btn-primary:hover {color: #FFF !important;}
#static-bg {
    position: fixed;
    top: 0px;
    z-index: -10;
    opacity:0.2;
    width: 100%;
}


* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative
}

html,
body {
  height: 100%;
}

body {
  background: #4DBDAD;
  color: #fff;
  font-family: 'Raleway', sans-serif;
}

.csstransforms .cn-wrapper {
  font-size: 1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.csstransforms .opened-nav {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cn-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 2;
}

.cn-overlay.on-overlay {
  visibility: visible;
  opacity: 1;
}

.cn-button {
  border: none;
  background: none;
  color: #FFF;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #337ab7;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
}

.cn-button:hover,
.cn-button:active,
.cn-button:focus {
  color: #FFF;
background-color: #2e6da4;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
}

.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(-10deg) skew(50deg);
  -ms-transform: rotate(-10deg) skew(50deg);
  -moz-transform: rotate(-10deg) skew(50deg);
  transform: rotate(-10deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(50deg);
  -ms-transform: rotate(30deg) skew(50deg);
  -moz-transform: rotate(30deg) skew(50deg);
  transform: rotate(30deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(3) {
  -webkit-transform: rotate(70deg) skew(50deg);
  -ms-transform: rotate(70deg) skew(50deg);
  -moz-transform: rotate(70deg) skew(50deg);
  transform: rotate(70deg) skew(50deg)
}

.csstransforms .cn-wrapper li:nth-child(4) {
  -webkit-transform: rotate(110deg) skew(50deg);
  -ms-transform: rotate(110deg) skew(50deg);
  -moz-transform: rotate(110deg) skew(50deg);
  transform: rotate(110deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(5) {
  -webkit-transform: rotate(150deg) skew(50deg);
  -ms-transform: rotate(150deg) skew(50deg);
  -moz-transform: rotate(150deg) skew(50deg);
  transform: rotate(150deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #FE491A;
  /* background-color: hsla(0, 88%, 63%, 1); */
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #F7B733;
  /* background-color: hsla(0, 88%, 65%, 1); */
}

/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #4DBDAD;
  /* background-color: hsla(0, 88%, 70%, 1); */
}


/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #4DBDAD;
  /* background-color: hsla(0, 88%, 70%, 1); */
}
.csstransforms .cn-wrapper li:not(.active) a:focus
{
    position:fixed;
}
 

/* fallback */
.no-csstransforms .cn-button {
  display: none;
}

.no-csstransforms .cn-wrapper li {
  position: static;
  float: left;
  font-size: 1em;
  height: 5em;
  width: 5em;
  background-color: #eee;
  text-align: center;
  line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  font-size: 1.3em;
  border-right: 1px solid #ddd;
}

.no-csstransforms .cn-wrapper li a:last-child {
  border: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
  background-color: white;
}

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}

.no-csstransforms .cn-wrapper {
  font-size: 1em;
  height: 5em;
  width: 25.15em;
  bottom: 0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left: 50%;
  border: 1px solid #ddd;
}

@media screen and (max-width:480px) {
  .csstransforms .cn-wrapper {
    font-size: .68em;
  }

  .cn-button {
    font-size: 1em;
  }

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}

@media screen and (max-width:320px) {
  .no-csstransforms .cn-wrapper {
    width: 15.15px;
    margin-left: -7.5em;
  }

  .no-csstransforms .cn-wrapper li {
    height: 3em;
    width: 3em;
  }
}