/*
Theme Name: DTS Theme
Theme URI: http://dts.utah.gov
Description: DTS WordPress Theme
Version: 1.1
Author: DTS User Experience Design Group
Author URI: http://dts.utah.gov
*/

@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-light-webfont.eot');
	src: url('css/webfonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-light-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-light-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-light-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-light-webfont.svg#montserratlight') format('svg');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-regular-webfont.eot');
	src: url('css/webfonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-regular-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-regular-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-regular-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-semibold-webfont.eot');
	src: url('css/webfonts/montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-semibold-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-semibold-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-semibold-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-bold-webfont.eot');
	src: url('css/webfonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-bold-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-bold-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-bold-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-extrabold-webfont.eot');
	src: url('css/webfonts/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-extrabold-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-extrabold-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-extrabold-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-extrabold-webfont.svg#montserratextra_bold') format('svg');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'montserrat';
	src: url('css/webfonts/montserrat-black-webfont.eot');
	src: url('css/webfonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'),
	url('css/webfonts/montserrat-black-webfont.woff2') format('woff2'),
	url('css/webfonts/montserrat-black-webfont.woff') format('woff'),
	url('css/webfonts/montserrat-black-webfont.ttf') format('truetype'),
	url('css/webfonts/montserrat-black-webfont.svg#montserratblack') format('svg');
	font-weight: 900;
	font-style: normal;
}

/*! 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 {
	color: #444;
	background: #001F2E;
	font-size: 1em;
	line-height: 1.4;
	font-family: 'montserrat',helvetica,sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

/*
 * 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,
.wp-caption {
    vertical-align: middle;
	max-width: 100% !important;
	height: auto;
}

/*
 * Remove default fieldset styles.
*/

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

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

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 31px 0 0;
    background: #ccc url("img/alert-icon-large.png") 15px center no-repeat;
    color: #000;
    padding: 20px 15px 20px 100px;

}

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


.site-full {
	width: 100%;
}
.site-full-padded {
	width: 100%;
	padding: 0 60px;
	box-sizing: border-box;
}
.site {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

a {
	color: #294352;
}
a.nounderline {
    text-decoration: none;
}
a.nounderline:hover {
    text-decoration: underline;
}

.redlinks a {
    color: #e7583f;
}
.nounderline a {
    text-decoration: none;
}
.nounderline a:hover {
    text-decoration: underline;
}

a[href^="tel:"] {
	text-decoration: none;
	color: #e7583f;
	font-weight: 400;
}

h1, h3, h5 {
	color: #e7583f;
}
h1 {
	font-size: 3em;
	font-weight: 300;
	margin: 0.4em 0;
	line-height: 1em
}
h2 {
	font-size: 1.8em;
	font-weight: 400;
}
h3 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 1em 0 0;
}
table h3 {
    margin: 0;
}

h4 {
	margin: 1em 0 0;
}

h3 + p,
h3 + ul,
h3 + ol,
h4 + p,
h4 + ul,
h4 + ol {
	margin-top: 0
}

ul.no-bullets {
	list-style-type: none;
	padding: 0;
	margin: 10px 0;
}
.border-radius-5 {
	border-radius: 5px;
}

.icon {
	background: url("img/icons.png") no-repeat;
	background-size: 1280px;
}

.icon.search64 {
	display: block;
	background-position: 0 0;
	width: 64px;
	height: 64px;
	transition: all 300ms;
}
.icon.search64.home {
	border: 3px solid #fff;
	border-radius: 50%;
	position: absolute;
	bottom: 70px;
}
.icon.search64.home:hover, .icon.search64.home.hovered {
	background-color: #00b59b;
	border-color: #00b59b;
}
.icon.search64.home.hovered {
	transition-delay: 600ms;
}
.icon.search42 {
	display: block;
	background-position: -256px 0;
	height: 42px;
	width: 42px;
}
.icon.search32 {
	display: block;
	background-position: -128px -32px;
	height: 32px;
	width: 32px;
}
.icon.arrowup {
	background-position: -192px 0;
	height: 32px;
	width: 32px;
}

.icon.onlinehelp {
	background-position: -384px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.phonehelp {
	background-position: -640px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.chathelp {
	background-position: -512px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.mail-large {
	background-position: -768px -128px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.desktop {
	background-position: -768px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.windows-logo {
	background-position: -896px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.android-logo {
	background-position: -1024px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.apple-logo {
	background-position: -1152px 0;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.shopping-cart {
	background-position: -896px -128px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.money {
	background-position: -1024px -128px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.alert {
	background-position: -384px -264px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.investigation {
	background-position: -512px -384px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.training {
	background-position: -384px -384px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.forms {
	background-position: -1152px -128px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.human_resources {
	background-position: -512px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.project_management {
	background-position: -640px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.newsletters {
	background-position: -768px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.finance {
	background-position: -896px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.organization {
	background-position: -1024px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.change_management {
	background-position: -1152px -256px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.menustack {
	background-position: -160px -32px;
	height: 32px;
	width: 32px;
	display: block;
}
.icon.linkedin {
	background-position: -298px -0px;
	height: 42px;
	width: 42px;
	display: block;
}
.icon.twitter {
	background-position: -298px -42px;
	height: 42px;
	width: 42px;
	display: block;
}
.icon.youtube {
	background-position: -340px -42px;
	height: 42px;
	width: 42px;
	display: block;
}
.facebook {
	background: url("img/dts-facebook.svg") center no-repeat;
	height: 42px;
	width: 42px;
	display: block;
	background-size: 32px;
}
.instagram {
	background: url("img/dts-instagram.svg") center no-repeat;
	height: 42px;
	width: 42px;
	display: block;
	background-size: 36px;
}
.background-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.icon.gear {
	background-position: -640px -384px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.badge {
	background-position: -768px -381px;
	height: 128px;
	width: 128px;
	display: block;
}
.icon.servers {
	background-position: -896px -381px;
	height: 128px;
	width: 128px;
	display: block;
}
.home a:hover .icon.onlinehelp.hover {
	background-position: -384px -128px;
}
.home a:hover .icon.phonehelp.hover {
	background-position: -640px -128px;
}
.home a:hover .icon.chathelp.hover {
	background-position: -512px -128px;
}

.button {
	display: inline-block;
	padding: 5px 15px;
	border: 1px solid;
	border-radius: 3px;
	text-decoration: none;
	transition: all 300ms;
}
.button.small {
	padding: 3px 10px;
	line-height: 1em;
}
.button.small-medium {
    width: 150px;
}
.button.medium {
	width: 200px;
}
.button.large {
	width: 300px;
}
.button:hover {
	background: #294352;
	color: #ffffff;
	border-color: #294352;
}
.reverse-flat-green:hover {
	border-color: #559500;
	background-color: #559500;
	color: #fff;
}
.reverse-flat-blue:hover {
	border-color: #3498DB;
	background-color: #3498DB;
	color: #fff;
}
.reverse-flat-red:hover {
	border-color: #e7583f;
	background-color: #e7583f;
	color: #fff;
}

.reverse-color .button {
	border-color: #ffffff;
}
.background-flat-red .button:hover,
.magiccircle.red .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #e7583f;
}
.background-flat-blue .button:hover,
.magiccircle.blue .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #3498DB;
}
.background-flat-green .button:hover,
.magiccircle.green .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #559500;
}
.background-flat-medblue .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #294352;
}

ul.buttongrid {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.buttongrid li {
	margin: 10px 10px 0 0;
	padding: 0;
	float: left;
}
ul.buttongrid.full li, ul.buttongrid.full li a {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
ul.buttongrid.full li:first-child {
	margin: 0 10px 0 0;
}
.gridtitle {
	font-weight: 500;
	font-size: 1.2em;
}

.searchbox {
	width: 60%;
	height: 80px;
	border: 3px solid #FFF;
	display: none;
	z-index: 300;
	position: fixed !important;
}
.home .searchbox {
	position: absolute !important;
}
.searchbox input.search {
	border: none;
	outline: none;
	background: transparent;
	font-size: 2em;
	color: #fff;
	height: 100%;
	width: calc(100% - 150px);
	box-sizing: border-box;
	padding: 10px 10px 10px 70px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.searchbox .searchButton {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	line-height: 80px;
	font-size: 2em;
	text-decoration: none;
	border-left: 2px solid #fff;
	transition: all 300ms;
	width: 150px;
	text-align: center;
	outline: none;
}
.searchbox .searchButton:focus, .searchbox .searchButton:hover {
	background: #fff;
	color: #001F2E;
}
.searchbox .search32 {
	display: none;
}
.searchbackdrop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 250;
	display: none;
	background: rgba(41, 67, 82, 0.95);
	opacity: 0.9;
}

#stickyheaderplaceholder {
	height: 150px;
	width: 100%;
}

/* --------------------- MAIN MENU --------------------- */
.mainMenuWrapper {
	height: 150px;
	width: 100%;
	position: relative;
	margin: 0;
	transition: height 300ms;
	z-index: 200;
	background: rgba(41,67,82,1);
}
.mainMenuWrapper.sticky {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(41,67,82,0.95);
}
.admin-bar .mainMenuWrapper.sticky {
	top: 32px;
}
.mainMenuWrapper.sticky.small {
	height: 80px;
}
.mainMenuWrapper #mainmenu > ul {
	list-style-type: none;
	padding: 0 60px 0 250px;
	margin: 0;
}
.mainMenuWrapper.sticky #mainmenu > ul {
	padding: 0 60px 0 165px;
}
.mainMenuWrapper ul li {
	float: left;
}
.home .mainMenuWrapper ul li.hiddenhome {
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 2000ms;
}
.home .mainMenuWrapper.sticky ul li.hiddenhome {
	width: auto;
	height: auto;
	opacity: 1;
}
.mainMenuWrapper ul a {
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 10px 20px;
	font-size: 1.2em;
	transition: all 300ms;
	outline: none;
}
.mainMenuWrapper ul a:hover {
	color: #ff703b;
}
.home .mainMenuWrapper #menusearch {
	display: none;
}
.mainMenuWrapper #menusearch {
	padding: 10px 20px 10px 10px;
}
.mainMenuWrapper.sticky #menusearch {
	display: block;
}
.logoMain {
	left: 0;
}
.mainMenuWrapper ul .logoMain a {
	text-decoration: none;
	color: #fff;
	height: auto;
	padding: 3px 20px;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 3px;
	margin: 0 0 0 15px;
}
.mainMenuWrapper ul .logoMain a:hover {
	background: #fff;
	color: #ff703b;
}
.mainMenuWrapper ul .logoMain.imgrep a {
	width: 200px;
	height: 100px;
	background: url("img/DTS-GovOps-1Color-Reversed.svg") center center no-repeat;
	background-size: contain;
	position: relative;
	float: left;
	border: none;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 30px;
}
.mainMenuWrapper ul .logoMain.imgrep a:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

.mainMenuWrapper ul.sub-menu {
	display: none;
	position: absolute;
	float: left;
	z-index: 200;
	background: #559500; /* temp */
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.mainMenuWrapper ul.sub-menu li {
	float: none;
	margin: 0;
	padding: 0;
}

.menuPanel {
	display: none;
	float: left;
	position: absolute;
	z-index: 200;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: rgba(255,255,255,0.5) !important;
}
.menuPanel.sticky {
	position: fixed;
}
.menuPanel .triangle {
	display: block;
	position: absolute;
	top: -15px;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 15px 15px;
	border-color: transparent transparent #ffffff transparent;
}
.menuPanel ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.menuPanel ul li a {
	display: block;
	padding: 8px 15px;
	color: #ffffff;
	text-decoration: none;
	min-width: 200px;
}
.menuPanel ul li a:hover {
	background: rgba(255,255,255,0.1);
}

.menuPanel.mega {
	left: 0;
	width: 100%;
}
.menuPanel.mega > ul {
	float: left;
	left: 50%;
	position: relative;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	max-width: 1400px;
}
.menuPanel.mega > ul > li {
	float: left;
}
.menuPanel.mega > ul > li > a {
	font-weight: 500;
	font-size: 1.2em;
}
.menuPanel.mega ul li a {
	border-bottom: 1px solid rgba(255,255,255,0.2);
	min-width: auto;
}

/* --------------------- HOMEPAGE --------------------- */

.section {
	height: 600px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.section .inner {
	height: 600px;
	width: 80%;
	margin: 0 auto;
}

.section .sectiontitle {
	font-size: 4em;
	margin: 20px 0;
	line-height: 1em;
	font-weight: 800;
}
.section .sectiontitle.center {
	text-align: center;
}
.section .graphictitle {
	width: 40%;
	position: relative;
}
.section.top {
	min-height: 600px;
}
.section.top .inner {
	min-height: 600px;
}
.section.top .title {
	font-size: 2.8em;
	position: absolute;
	z-index: 50;
	font-weight: 300;
	top: 80px;
	left: 0px;
	width: 100%;
	text-align: center;
	letter-spacing: 3px;
}
.section.top .titlesm {
	font-size: 1em;
	position: absolute;
	z-index: 50;
	font-weight: normal;
	top: 50px;
	left: 0px;
	width: 100%;
	text-align: center;
	letter-spacing: 3px;
}

.section p {
	margin-top: 2em;
}
.section h1 + p,
.section h2 + p,
.section h3 + p {
	margin-top: 0;
}
.section p:first-of-type {
	margin-top: 0;
}
.section .imgleft, .section .imgright {
	display: block;
	width: 100%;
	padding: 0 0 0 40px;
	box-sizing: border-box;
}
.section .imgright {
	padding: 0;
}

.section-projects .panel-grid-cell:first-child {
	background:#3498db;
}

.section article h2,
.section article h3 {
	font-size: 1.8em;
	position: relative;
	left: auto;
	top: auto;
	font-weight: 500;
	line-height: 1em;
	margin: 0;
}
.section article h2.title {
	font-size: 3em;
	font-weight: 300;
}
.section article h2.title a,
h2.title a {
    text-decoration: none;
    transition: all 200ms;
}
h2.title a:hover {
    border: 1px solid #ddd;
    padding: 0 10px;
    border-radius: 3px;
    background: #f9f9f9;
}
.section article h2.title a:hover {
    border: none;
    padding: 0;
}
.section .show-title h2.title {
    font-size: 2em;
}
.hcenter.panel-widget-style article h2.title {
	font-size: 4em;
	font-weight: 700;
	text-align: center;
}
.section article h3 {
	font-size: 1.5em;
}
.section-expanded {
    padding: 36px 0;
}
.home .so-panel.widget h3.widget-title {
	display: none;
}
.home .so-panel.widget .show-title h3.widget-title {
	display: block;
	font-size: 4em;
	font-weight: 700;
}
.home .so-panel.widget .center-title h3.widget-title {
    text-align: center;
}
.product-title .so-panel.widget h3.widget-title {
	display: block;
}
.section .entry-content {
	margin: 15px 0;
}
.section .sectionbuttonright {
	display: block;
	padding: 0 20px;
	color: #FFF;
	position: absolute;
	right: -60px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	width: 120px;
	top: 50%;
	margin-top: -20px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	transition: all 300ms;
}
.section .sectionbuttonright:hover {
	color: rgba(0, 0, 0, 0);
}
.section .sectionbuttonright .icon {
	opacity: 0;
	transition: all 300ms;
}
.section .sectionbuttonright:hover .icon {
	opacity: 1;
}

.section .panel-grid-cell {
	position: relative;
	height: 100%;
}

.home .panel-widget-style {
	width: 100%;
}
.reverse-color,
.reverse-color a,
.reverse-color h1,
.reverse-color h2,
.reverse-color h3,
.reverse-color h4 {
	color: #ffffff;
}

/* ------ 3d cards / panels ------ */
.container3d, .container3d div {
	perspective: 1200px;
	-webkit-perspective: 1200px;
	perspective-origin: bottom;
	-webkit-perspective-origin: bottom;
}
.home .container3d, .home .container3d div, .home .so-panel.widget {
	width: 100%;
	height: 100%;
}
#content #content-main > header.container3d {
    height: 400px;
    max-width: none;
    overflow: hidden;
    position: relative;
}
.card3d {
	position: absolute;
	left: 5%;
	width: 200px;
	transform: none;
	transition: all 500ms;
}
.card3d.landscape {
	width: 100%;
    max-width: none;
}
header.container3d .card3d.landscape {
    max-width: 800px !important;
}
.card3d.on {
	transform:          rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-20px);
	-webkit-transform:  rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-20px);
	transform-style: flat;
	-webkit-transform-style: flat;
	left: 20%;
}
.card3d.landscape.on {
	transform:          rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-520px) translateZ(-175px);
	-webkit-transform:  rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-520px) translateZ(-175px);
	left: 30%;
}
header.container3d .card3d.on {
    transform:          rotateX(10deg) rotateY(-30deg) rotateZ(10deg) translateY(5px) translateX(0px) translateZ(-80px);
    -webkit-transform:  rotateX(10deg) rotateY(-30deg) rotateZ(10deg) translateY(5px) translateX(0px) translateZ(-80px);
    left: calc(50% + 200px);
}
header.container3d .card3d.landscape.on {
    transform:          rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-200px) translateZ(-175px) translateX(0);
    -webkit-transform:  rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-200px) translateZ(-175px) translateX(0);
    left: calc(50% - 300px);
}
header.container3d .card3d.on {
    box-shadow: 2px 2px 0 0 rgba(255,255,255,0.9);
    transition: all 1s;
    transition-delay: 500ms;
}
header.container3d .card3d.landscape.on {
    box-shadow: -2px 2px 0 0 rgba(255,255,255,0.9);
}
.card3d img {
	width: 100%;
	transition: all 500ms;
}
.card3d.on img {
	box-shadow: -2px 2px 0 0 rgba(255,255,255,0.9);
}
.card3d.noshadow.on img {
	box-shadow: none;
}

.width50 {
	width: 50%;
}
.width60 {
	width: 60%;
}
.width70 {
	width: 70%;
}
.entry-textcol2 .entry-content,
.textcol2 {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	-moz-column-gap: 40px; /* Firefox */
	column-gap: 40px;
}

.col3 {
	width: 33.33%;
	float: left;
	height: 100%;
}


.magiccircle {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: none;
	color: #fff;
	border: 3px solid #fff;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	cursor: pointer;
	transition: background-color 300ms, border-color 300ms;
	box-sizing: border-box;
}
.magiccircle:hover, .magiccircle.hovered {
	background: #fff;
	color: #fff;
}
.magiccircle.red:hover, .magiccircle.red.hovered, .magiccircle.red.open {
	background: #e7583f;
	border-color: #e7583f;
}
.magiccircle.red.hovered {
	transition-delay: 0ms;
}
.magiccircle.green:hover, .magiccircle.green.hovered, .magiccircle.green.open {
	background: #559500;
	border-color: #559500;
}
.magiccircle.green.hovered {
	transition-delay: 200ms;
}
.magiccircle.blue:hover, .magiccircle.blue.hovered, .magiccircle.blue.open {
	background: #00A1EA;
	border-color: #00A1EA;
}
.magiccircle.blue.hovered {
	transition-delay: 400ms;
}
.magiccircle .circlecontent {
	display: none;
	box-sizing: border-box;
}
.magiccircle .circlecontent.full {
	width: calc(100% - 120px);
	border-top: 1px solid #FFF;
	padding: 30px 0 0 0;
}
.magiccircle .circlecontent.posright {
	padding: 0 0 0 30px;
	border-left: 1px solid #FFF;
}
.magiccircle .circlecontent.posleft {
	border-right: 1px solid #FFF;
	padding-left: 60px;
}
.circlecontent ul.nav-menu {
	max-width: 560px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.circlecontent.posleft ul.nav-menu {
	max-width: 530px;
}
.circlecontent ul.nav-menu.full {
	max-width: 100%;
}
.circlecontent ul.nav-menu li {
	float: left;
	margin: 10px 10px 0 0;
}

.circlecontent ul.nav-menu li.roundButton {
	margin: 0 30px 0 0;
}

.circlecontent ul.nav-menu li a {
	color: #ffffff;
	display: inline-block;
	padding: 5px 15px;
	border: 1px solid;
	border-radius: 3px;
	text-decoration: none;
	transition: all 300ms;
}
.circlecontent ul.nav-menu li a:hover {
	background: #ffffff;
}

.circlecontent ul.nav-menu li.roundButton a:before {
	content: "";
	height: calc(100% + 10px);
	width: 100%;
	display: block;
}
.circlecontent ul.nav-menu li.roundButton a {
	display: block;
	border: 3px solid #fff;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	text-decoration: none;
	text-align: center;
	color: #fff;
	position: relative;
	transition: all 300ms;
	padding: 0;
	margin: 0 0 50px 0;
}
.circlecontent ul.nav-menu li.roundButton a:hover {
	background-color: #fff;
}

.circlecontent ul.nav-menu > li.column > a {
	font-weight: 500;
	font-size: 1.2em;
	border: none;
	padding: 0;
	width: 100%;
	display: block;
}
.circlecontent ul.nav-menu > li.column > a:hover {
	background: none;
}

.circlecontent ul.sub-menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.circlecontent ul.sub-menu li,
.circlecontent ul.sub-menu li a {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}


.circlecontent ul.nav-menu li.clearleft {
	clear: left;
}

.circletext {
	width: 100%;
	font-size: 2em;
	font-weight: 300;
	text-align: center;
	letter-spacing: 2px;
}

#allproducts {
	top: -18px;
	width: 300px;
	text-align: center;
}

/* ******** Main Menu ******** */
#header-container {
	/*margin: 31px 0 0 0;*/
	position: relative;
}

#header-container #mobilemenu {
	display: none;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-direction: row;
	flex-direction: row;
}
#header-container #mobilemenu a {
	outline: none;
}
#header-container #mobilemenu a.icon {
	margin: 5px;
}
#header-container #mobilemenu .title {
	display: block;
	text-align: center;
	color: #ffffff;
	padding: 10px 0;
	box-sizing: border-box;
	text-decoration: none;
}

/* ********************** Content ********************** */
/* change to match your site */
#content-wrapper {
	background:#ccc;
}
#content {
	background:#fff;
}
#content #content-secondary {
	width:30%;
	float:left;
	padding:0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#content #content-main {
	padding:0;
	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#content #content-secondary~#content-main {
	width:67%;
	float:left;
	margin-left:3%;
}
#content #secondary-menu-button {
	display:none;
}

#content #content-main .product-sidebar {
	width: calc((100% - 860px) / 2);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #eeeeee;
	box-sizing: border-box;
	padding: 0 20px;
    overflow-y: auto;
}
#content #content-main .product-sidebar .product-sidebar-content {
	max-width: 320px;
	width: 100%;
	float: left;
}
#content #content-main .product-sidebar h3 {
	margin: 0 -20px;
	/*background: rgba(41, 67, 82, 0.1);*/
	padding: 10px 20px 0;
	font-weight: 300;
}
#content #content-main .product-sidebar p {
	margin: .25em 0 1em;
}

#content #content-main article,
#content #content-main > header,
#content #content-main > footer {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 45px;
	line-height: 1.7em;
}
/*#content #content-main .widget_siteorigin-panels-postloop article:nth-of-type(n+2) {
    border-top: 1px solid #ddd;
    margin-top: 26px;
}*/
.accomplishmentsPageTitle {
	text-align:center;
}
.agencyAccomplishmentsTitle {
	color: #FFFFFF;
    background-color: #e7583f;
    padding: 7px 10px 7px 40px;
    margin-top:0px;
    margin-bottom: 10px;
}
.projectEntered {
	color:#666;
	font-style: italic;
    font-weight: 600;
}
.projectEntered a {
	margin-left:10px;
}
ul.agencyTerms {
	list-style-type:none;
	margin:0;
	padding:0;
	clear:both;
}
ul.agencyTerms li {
	/*float:left;*/
}
ul.agencyTerms li a{
	/*display:inline-block;
	padding-right:7px;*/
}
div.agencyContainer {
	display:flex;
	flex-flow:wrap;
}
#content #content-main .agencyContainer article {
    margin: 0 auto;
    padding: 0 45px;
    line-height: 1.7em;
    flex-basis: 40%;
}
div.projects h3.widget-title {
	color:#FFFFFF;
	background-color: #e7583f;
	padding:7px 10px 7px 40px;
	margin-bottom:10px;
}
#content #content-main div.projects .widget_siteorigin-panels-postloop article:nth-of-type(n+2) {
	border-top: 0!important;
    margin-top: 0;
}
#content #content-main article.full-width {
	max-width: none;
	width: 100%;
	padding: 0;
}
#content #content-main article article {
	padding: 0;
}
#content #content-main .product-sidebar~article {
	max-width: 700px;
	margin: 0 auto;
}

#content #content-main article footer {
	font-size: 0.9em;
	font-style: italic;
	opacity: 0.7;
	margin: 20px 0;
}

#secondaryContentControl {
    display: none;
    width: 100%;
    background: #eeeeee;
    text-align: center;
    padding: 5px 0;
}

#nav-below h3 {
    border-bottom: 1px solid;
}


/* ********************** DTS Documents Content ********************** */
.last-revised {
	font-size: 0.9rem;
	color: #777;
	float: right;
	margin-top: 1rem;
}
.last-revised__title {
	color: #444;
}
.document-description {
	margin: 0 0 1rem 0;
	position: relative;
}
.document-description__title::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 38px 48px 0;
	border-color: transparent #ffffff transparent transparent;
}
.document-description__title {
	font-weight: bold;
	padding: 1rem 3rem 1rem 1rem;
	color: #666;
	background: #f1f1f1;
	line-height: 1rem;
	float: left;
	position: relative;
}
.document-description__content {
	background: #f8f8f8;
	padding: 1px 1rem;
}



/*    *********    *********   Secondary Menu   *********    *********    */
#content-secondary .widget {
	padding:15px;
}
#content-secondary .widget.widget_nav_menu {
	padding:0;
}
#content-secondary .widget_nav_menu h3 {
	/* change to match your site */
	padding:15px 20px;
	margin:0;
	background:#666;
	color:#fff;
	font-size:1.4em;
}
#content-secondary .widget_nav_menu ul.menu,
#content-secondary .widget_nav_menu ul.menu ul.sub-menu {
	list-style-type: none;
	margin:0;
	padding:0;
}
#content-secondary .widget_nav_menu ul.menu ul.sub-menu {
	/* change to match your site */
	border-left:10px solid #333;
}
#content-secondary .widget_nav_menu ul.menu > li.menu-item {
	margin:0;
	padding:0;
}
#content-secondary .widget_nav_menu ul.menu > li.menu-item a {
	/* change to match your site */
	background: #eee;
	padding: 10px;
	display:block;
	text-decoration:none;
	border-bottom:1px solid #aaa;
	border-top:1px solid #fff;
	text-shadow: 0 1px 0 #fff;
	color:#444;
	font-weight: bold;
}
#content-secondary .widget_nav_menu ul.menu > li.menu-item a:hover,
#content-secondary .widget_nav_menu ul.menu li.menu-item.current-menu-item > a {
		/* change to match your site */
	color:#00a1ff;
}
#content-secondary .widget_nav_menu ul.menu > li.menu-item a .menu-arrow {
	/* change to match your site */
	display:inline-block;
	width:20px;
	height:20px;
	background:transparent url('img/secondary-menu-arrows.png') left top no-repeat;
	vertical-align: top;
	margin-right:10px;
}
#content-secondary .widget_nav_menu ul.menu > li.menu-item a .menu-arrow:hover,
#content-secondary .widget_nav_menu ul.menu > li.menu-item a .menu-arrow.open {
	background-position-x: right;
}

#content-secondary .widget_nav_menu ul.menu > li.menu-item ul.sub-menu {
	display:none;
}
#content-secondary .widget_nav_menu ul.menu li.current-menu-parent > ul.sub-menu,
#content-secondary .widget_nav_menu ul.menu li.current-menu-ancestor > ul.sub-menu{
	display:block;
}

.sidebar-video iframe {
    max-width: 100%;
    height: auto;
}
iframe {
    width: 100%;
    height: auto;
}
iframe.sharpcloud {
	min-height: 80vh;
}

.restrictedmessage {
	background: #fafafa;
	padding: 200px 0;
}

/* ***************    Images and Captions   *************** */
.alignleft {
	float: left;
	margin:0 15px 15px 0;
}

.alignright {
	float: right;
	margin:0 0 15px 15px;
}


.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	background-color:#ebebeb;
	font-style: italic;
	font-size: .79em;
	line-height: 1.5;
	color: #757575;
	padding:5px;
}

div.wp-caption {
	max-width: 100%;
}

p.wp-caption-text {
	max-width: 100%; /* Keep wide captions from overflowing their container. */
	text-align:center;
	padding:0;
	margin:0 10px 0 0;
}

.alignnone p.wp-caption-text {
	margin:0;
}

/* ********************** Footer ********************** */
#footer-wrapper.fixed {
	position: fixed;
	bottom: 0;
	z-index: -10;
}
#footer-wrapper #footer {
	color: #ffffff;
}
#footer {
	font-size: 0.9em;
}
#footer > div {
	max-width: 300px;
}
#footer ul {
	list-style-type: none;
	padding: 0;
}
#footer ul li ul {
	padding: 0 0 0 15px;
	margin-top: 0;
}
#footer ul li.menu-item-has-children > a {
	font-weight: 600;
}
#footer ul a  {
	text-decoration: none;
}
#footer ul a[href]:hover  {
	text-decoration: underline;
}
#footer h3 {
	border-bottom: 1px solid;
	padding: 0 0 .5em 0;
}
#footer a {
	color: #ffffff;;
}
#footer h3 a {
	text-decoration: none;
	color: inherit;
}
#footer #logo {
	display: block;
	padding: 15px;
}
#footer #logo img {
	margin: 0 auto;
	display: block;
}

#uibar {
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
	width:100%;
	line-height: 30px;
	font-size:12px;
	background-color: #0d151a;
}
.admin-bar #uibar {
	top:32px;
}
#uibar #uibar-left {
	float:left;
	width: calc(100% - 150px);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#uibar #settings {
	width: 150px;
	height:31px;
	float:right;
	border-left:1px solid #444;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}
#uibar #settings a {
	color:#fff;
	text-decoration:none;
	font-size:12px;
}
#uibar #settings a img {
	width:24px;
	margin-left:-10px;
}

#utahgov_statewideheader {
	background: transparent !important;
}
#utahgov_statewideheader a {
	color: #eeeeee !important;
}
button#searchutgovbtn {
	vertical-align: super;
}

/* Footer Placeholder */

#footerPlaceholder {
	z-index: -20;
	position: absolute;
}

/* ==========================================================================
   Site Settings
   ========================================================================== */
#settings-link {
	outline: none;
}
#sitesettingsul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#sitesettingsul li {
	padding: 0;
	margin: 0 0 15px 0;
}

/*  ==========================================================================
	Popup Dialog
	========================================================================== */
.pop-up-box-backdrop {
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 500;
	top: 0;
	left: 0;
	display: none;
	overflow: auto;
}
.pop-up-box {
	background-color: #f9f9f9;
	border-radius: 8px;
	margin: 50px auto;
	display: block;
	position: relative;
	width: 620px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}
.pop-up-box.large {
	width: 920px;
}
.pop-up-box .form {
	border: none;
}
.pop-up-box-content {
	background: #f2f2f2;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.pop-up-box .footer {
	padding: 15px;
	/*box-shadow: 0 10px 10px -10px rgba(0,0,0,0.4) inset;*/
	border-radius: 0 0 8px 8px;
	background: #fff;
	border-top: 1px solid #bbb;
	text-align: center;
}
.pop-up-box-backdrop .icon.closebutton {
	z-index: 100;
	position: absolute;
	width: 32px;
	height: 32px;
	right: -16px;
	top: -16px;
	background-position: -192px -32px;
	background-color: #222;
	border-radius: 50%;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.6);
	border: 2px solid #eeeeee;
	transition: background-color 200ms;
}
.pop-up-box-backdrop .closebutton:hover {
	background-color: #e7583f;
}

/*      *************** Layout - Contact Form ***************        */
div.wpcf7 {
}
form.wpcf7-form {}
form.wpcf7-form .row {
	margin-bottom: 15px;
}
form.wpcf7-form label {
	display: block;
	float: left;
	width: 25%;
	text-align: right;
	margin-right: 2%;
}
form.wpcf7-form span.wpcf7-form-control-wrap {
	display: block;
	float: left;
	width: 73%;
}
form.wpcf7-form input[type="text"], form.wpcf7-form input[type="email"], form.wpcf7-form textarea {
	height: 30px;
	border: 1px solid #333;
	border-radius: 2px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px;
}
form.wpcf7-form textarea {
	width:100%;
	height:200px;
}
form.wpcf7-form input.small {
	width: 25%;
}
form.wpcf7-form input.medium {
	width: 50%;
}
form.wpcf7-form input.large {
	width: 100%;
}
form.wpcf7-form input[type="submit"] {
	padding:10px 40px;
	height: auto;
	font-size: 1.25em;
}
form.wpcf7-form .wpcf7-response-output+br
{
	display: none;
}
form.wpcf7-form .wpcf7-response-output+p
{
	margin:0;
}

/* ********************** Buttons ********************** */

 .revdropshadowtext, .revdropshadowtext h2, .revdropshadowtext a {
	color:#fff;
	font-weight: normal;
}
.revdropshadowtext a:hover {
	color:#eee;
}

/* ********************** Document Icons ********************** */
.documentdl {
	display: inline-block;
	padding-left: 20px;
	background: transparent url("img/document-default.png") left 3px no-repeat;
	min-height: 16px;
}
.documentdl.pdf {
	background-image: url("img/document-pdf.png");
}
.documentdl.excel {
	background-image: url("img/document-excel.png");
}
.documentdl.word {
	background-image: url("img/document-word.png");
}
.documentdl.zip {
	background-image: url("img/document-zipper.png");
}
.documentdl.video {
	background-image: url("img/icon-video-small.png");
    background-position: left center;
}

a.button.documentdl {
	background-position: 5px center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Restricted Content Classes used in conjuction with a function in the main.js to hide and show content
   You also need a role-based plugin to manage restricted content such as the "Members" Wordpress plugin
   ========================================================================== */
.agency-restricted {
	display:none !important;
}
.state-restricted {
	display:none !important;
}
.agency-restricted.visible {
	display: inherit !important;
}
.state-restricted.visible {
	display: inherit !important;
}

/* ********************** Table ********************** */

table {
	margin-top: 20px;
	width: 100%;
}
thead {
	border-bottom: 1px solid;
}
th {
	text-align: left;
	font-weight: 500;
	padding: 5px 10px;
}
table tr {
	height: auto !important;
}
tr:first-child {
	/*border-bottom: 1px solid;*/
}
td:nth-of-type(3), th:nth-of-type(3) {
	text-align: right;
}
td {
	padding: 5px 10px;
}
tr:nth-child(2n+2) {
	background-color: #eee;
}
.table_finance tr:first-child {
	border: none;
}

.table_finance tr:nth-child(odd) {
	background-color: #eee;
	font-weight: 400;

}
.table_finance tr:nth-child(even) {
	background-color: #fff;
}
.table_finance tr:nth-child(even) td:first-child {
	width: 33%;
}

table.border td {
	border: 1px solid #ddd;
}

table td.phone {
	min-width: 120px;
}

/* ************************ Step by Step ************************** */
.steps {
	box-sizing: border-box;
}
.steps p {
	margin: 1em 0 0 0;
}
.steps ol {
	padding: 10px 21px;
	margin: 0;
}
.steps img {
	display: block;
	margin: 0px auto;
	max-height: 275px;
	width: auto;
	padding: 25px 0;
}
.steps--lg-img-height img {
	max-height: 400px;
}
.steps-ios {
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
}

.steps-ios img {
	max-height: 375px;
}
@media only screen and (max-width: 582px){
	.steps-ios {
		/*width: 100%;*/
		display: block;
	}
	.steps-ios img {
		height: 375px;
	}
}
/*
legibility issues with images on osx-laptop page
*/
.steps-os img {
	display: block;
	margin: 0px auto;
	/* max-height: 275px;*/
	width: auto;
	padding: 25px 0;
}
/* ************************ Flex Box and Circles ************************** */
.box {
	display: -webkit-inline-flex;
	display: inline-flex;
	width: 100%;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-flex-flow: wrap;
	flex-flow: wrap;
}
.box.circles {
	margin-bottom: 75px;
}
.box_between {
	display: -webkit-inline-flex;
	display: inline-flex;
	width: 100%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin-bottom: 70px;
	-webkit-flex-flow: wrap;
	flex-flow: wrap;
}
.flex {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-flex-flow: wrap;
	flex-flow: wrap;
}
.flex.center {
	-webkit-justify-content: center;
	justify-content: center;
}
.box-reset-margin {
	margin: 25px 0;
}
.two-column {
	width: 340px;
}
.three-column {
	width: 210px;
	text-align: center;
}

.pricingOptions {
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 15px;
}

.total {
	text-align:center;
	font-weight:bold;
	color:#FFFFFF;
	padding:10px 0;
	}

.total span {
	display:block;
	font-size:1em;
	font-weight:bold;
	}

article.full-width .three-column {
	width: 300px;
}
article.full-width .two-column {
	width: 350px;
	padding: 20px;
	margin: 15px;
	position:relative;
}

.hosting {
	height:620px;
}

.storage, .dataCenter {
	width:33%!important;
}

.dataCenter h2 span {
font-size:.8em;
display:block;
}

.four-column {
	width: 162px;
	text-align: center;
}
.three-column a,
.four-column a {
	display: block;
	margin: 5px 0;
}
.three-column a {
	min-height: 40px;
	line-height: 1.3em;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.two-column ul ,
.three-column ul,
.four-column ul {
	margin: 20px 0;
	list-style-type: none;
	padding: 0;
}
.three-column li,
.four-column li {
	margin: 10px 0;
}
.flex-circle {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	position: relative;
	transition: all 200ms;
	box-sizing: border-box;
	overflow: visible;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
}
.flex-circle.smaller {
	height: 115px;
	width: 115px;
}
a.flex-circle {
	outline: none;
}
.social-circle {
	height: 48px;
	width: 48px;
	border-radius: 50%;
	transition: all 200ms;
	box-sizing: border-box;
	position: relative;
	margin-right: 10px;
}
.box.circles .flex-circle {
	margin: 0 auto;
}
 a.flex-circle::before {
	content: "";
	display: block;
	height: 160px;
	width: 150px;
}
a.flex-circle.smaller::before{
	height: 125px;
	width: 115px;
}
.flex-circle.background-flat-red:hover {
	background: rgba(231, 88, 63, .8);
	border-color: rgba(231, 88, 63, .8);
}
.flex-circle.background-flat-blue:hover {
	background: rgba(52, 152, 219, .8);
	border-color: rgba(52, 152, 219, .8);
}
.flex-circle.background-flat-green:hover {
	background: rgba(85, 149, 0, .8);
	border-color: rgba(85, 149, 0, .8);
}
.flex-circle.background-flat-medblue:hover {
	background: rgba(41, 67, 82, .8);
	border-color: rgba(41, 67, 82, .8);
}
.flex-circle.background-flat-reddark:hover {
	background: rgba(167, 62, 41, .8);
	border-color: rgba(167, 62, 41, .8);
}
.flex-circle.background-flat-teal:hover {
	background: rgba(0, 181, 155, .8);
	border-color: rgba(0, 181, 155, .8);
}
@media only screen and (max-width: 639px){
	.box {
		justify-content: space-around;
	}
}
@media only screen and (max-width: 389px){
	.button.large {
		width: inherit;
	}
}
@media only screen and (max-width: 340px) {
	.box.circles .flex-circle.margin-extra {
		margin: 75px auto 25px;
	}
}

#testsiteflag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5000;
    padding: 10px 50px;
	top: 634px;
}

/* ********************** Backgrounds and Colors ********************** */

.background-bokeh_and_lines {
	background-image: url("img/Bokeh-Dark-Blue.jpg");
	background-position: center 0;
	background-repeat: repeat-y;
	background-size: cover;
	background-attachment: fixed;
}
.background-gray-squares {
	background-image: url("img/gray-squares.svg");
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: center center;
}
.background-blue-circles{
	background-image: url("img/blue-circles.svg");
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: center center;
}
.background-transition {
	transition: background 1000ms;
}

.parallax {
	background-attachment: fixed;
}

.background-white90 {
	background: rgba(255,255,255,0.9);
}
.background-ltblue {
	background: #84ebfa;
}
.background-flat-darkblue {
	background: #001F2E;
}
.background-flat-medblue {
	background: #294352;
}
.color-flat-medblue {
	color: #294352;
	border-color: #294352;
}
.background-flat-light {
	background: #f0f2f5;
}
.background-flat-blue {
	background: #3498DB;
}
.color-flat-blue {
	color: #3498DB;
	border-color: #3498DB;
}
.background-flat-deepblue {
	background: #2980B9;
}
.background-flat-red {
	background: #e7583f;
	border-color: #e7583f;
}
.color-flat-red {
	color: #e7583f;
	border-color: #e7583f;
}
.background-flat-reddark {
	background: #a73e29;
	border-color: #a73e29;
}
.color-flat-green {
	color: #559500;
	border-color: #559500;
}
.background-flat-green {
	background: #559500;
}
.background-flat-teal {
	background: #00b59b;
}
.color-white {
	color: #fff;
}
.background-white {
	background: #FFFFFF;
}
.background-ltgray {
	background: #fafafa;
}
.background-gray {
	background: #f3f3f3;
}
.background-medgray {
	background: #eaeaea;
}
.background-meddarkgray {
	background: #aaa;
}
.background-darkgray {
	background: #333;
}
.color-black007 {
	color: rgba(0, 0, 0, 0.07);
}

/* ********************** Layout ********************** */

.small-text {
	font-size: 0.9rem;
}
.height100 {
	height: 100%;
}
.floatright {
	float: right;
}
.floatleft {
	float: left;
}
.hcentermargin {
	display: block;
	margin: 0 auto;
}
p.hcentermargin {
	margin: 1em auto;
}
.hcenter {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.vcenter {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.vcenter.right {
	right: 0;
}
.vcenter.left {
	left: 0;
}
.vcenter.hcenter {
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.flex-circle.smaller .vcenter.hcenter {
	-webkit-transform: translate(-50%,-50%) scale(.75,.75);
	transform: translate(-50%,-50%) scale(.75,.75);
}
.aligncenter {
	text-align: center;
}
.posright {
	right: 0;
}
.posleft {
	left: 0;
}

/* ********************** Columns for Responsive Layout ********************** */
.row {
	display:block;
}
.row .column {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	display:block;
	margin-bottom: 15px;
}
.circlecontent ul.row li.col2,
.row .col2 {
	margin-left:4%;
	margin-right: 0;
	width:48%;
}
.circlecontent ul.row li.col2:first-child,
.circlecontent  ul.row li.col2:nth-child(2n+3),
.row .col2:first-child,
.row .col2:nth-child(2n+3) {
	margin-left:0;
	clear:left;
}
.circlecontent ul.row li.col3,
.row .col3 {
	margin-left:3.5%;
	margin-right: 0;
	width:31%;
}
.circlecontent ul.row li.col3:first-child,
.circlecontent  ul.row li.col3:nth-child(3n+4),
.row .col3:first-child,
.row .col3:nth-child(3n+4) {
	margin-left:0;
	clear:left;
}
.circlecontent ul.row li.col4,
.row .col4 {
	margin-left:4%;
	margin-right: 0;
	width:22%;
}
.circlecontent ul.row li.col4:first-child,
.circlecontent  ul.row li.col4:nth-child(4n+5),
.row .col4:first-child,
.row .col4:nth-child(4n+5) {
	margin-left:0;
	clear:left;
}
.circlecontent ul.row li.col5,
.row .col5 {
	margin-left:2.5%;
	margin-right: 0;
	width:18%;

}
.circlecontent ul.row li.col5:first-child,
.circlecontent  ul.row li.col5:nth-child(5n+6),
.row .col5:first-child,
.row .col5:nth-child(5n+6) {
	margin-left:0;
	clear:left;
}
.circlecontent ul.row li.col6,
.row .col6 {
	margin-left:2%;
	margin-right: 0;
	width:15%;
}
.circlecontent ul.row li.col6:first-child,
.circlecontent  ul.row li.col6:nth-child(6n+7),
.row .col6:first-child,
.row .col6:nth-child(6n+7) {
	margin-left:0;
	clear:left;
}





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

/* Turn off image smoothing rendering in browsers */
.nosmoothing {
	image-rendering:optimizeSpeed;             /* Legal fallback */
	image-rendering:-moz-crisp-edges;          /* Firefox        */
	image-rendering:-o-crisp-edges;            /* Opera          */
	image-rendering:-webkit-optimize-contrast; /* Safari         */
	image-rendering:optimize-contrast;         /* CSS3 Proposed  */
	image-rendering:crisp-edges;               /* CSS4 Proposed  */
	image-rendering:pixelated;                 /* CSS4 Proposed  */
	-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}

/*
 * Temp Show for measuring hidden elements. (See plugins.js)
*/
.temp-show {
	display:block;
}

/*
 * 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;
}

/*
 * No wrapping or breaking up whitespace
*/
.no-break {
	white-space: nowrap;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (max-width: 1500px) {
	#content #content-main .product-sidebar {
		width: 320px;
	}
	#content #content-main .product-sidebar~article {
		max-width: 700px;
		margin: 0 350px 0 0;
		float: right;
	}
}

@media only screen and (max-width: 1260px) {
    .home .so-panel.widget .show-title h3.widget-title {
        font-size: 3em;
    }
}

@media only screen and (max-width: 1150px) {
	.mainMenuWrapper ul a {
		padding: 10px 15px;
	}
	.section.top .title {
		letter-spacing: 2px;
	}
}

@media only screen and (max-width: 1030px) {
	.mainMenuWrapper ul a {
		font-size: 1.1em;
	}
	.mainMenuWrapper ul .logoMain.imgrep a {
		width: 80px;
		height: 80px;
		margin: 0 20px;
	}
	.mainMenuWrapper ul .logoMain a {
		padding: 3px 10px;
	}
	.mainMenuWrapper #mainmenu > ul {
		padding: 0 50px 0 110px;
	}
	.mainMenuWrapper.sticky #mainmenu > ul {
		padding: 0 50px 0 135px;
	}
	.icon.search42 {
		display: block;
		background-position: -198px 0;
		height: 32px;
		width: 32px;
		background-size: 1000px;
	}
	.section.top .title {
		letter-spacing: 1px;
	}
}
/***********     Transition to MOBILE VIEW Most of the time     ***********/
@media only screen and (max-width: 970px) {

	.section.top {
		display: none;
		height: 60px;
		min-height: 60px;
		background: #294352;
	}
	.section.top .title,
	.section.top .titlesm,
	.section.top > a.search64,
	.section.top .inner {
		display: none;
	}
	.home .section {
		height: auto;
		padding: 20px 0;
	}
	.home .section.top {
		padding: 0;
	}
	.home .section .imgleft.vcenter,
	.home .section .imgright.vcenter,
	.home .section .panel-widget-style.vcenter,
	.home .section .entry-textcol2.vcenter
	.home .section .panel-widget-style.hcenter {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		-webkit-transform: none;
	}

	.home .section .imgleft, .home .section .imgright {
		height: 100px;
		margin: 0 auto;
	}

	.home .section .width60 {
		width: 100%;
	}

	.section .sectionbuttonright {
		transform: rotate(90deg) translateX(-50%);
		margin-top: 0;
	}

	.card3d {
		position: relative;
		left: 23%;
		transform: translateX(-25%);
		-webkit-transform: translateX(-50%);
		width: 20%;
	}
	.card3d.landscape {
		width: 50%;
	}
	.card3d.on {
		transform:          rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-20px);
		-webkit-transform:  rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-20px);
	}
	.card3d.landscape.on {
		transform:          rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-10px) translateZ(0) translateX(-152px);
		-webkit-transform:  rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-10px) translateZ(0) translateX(-152px);
	}
    header.container3d .card3d {
        position: absolute;
        width: 200px;
    }
    header.container3d .card3d.landscape {
        width: 100%;
    }

	.row .col2,
	.row .col2:nth-child(2n+3),
	.row .col3,
	.row .col3:nth-child(3n+4) {
		margin-left:0;
		width:100%;
	}
	.row .col4,
	.row .col4:nth-child(4n+5) {
		margin-left:4%;
		width:48%;
		clear:none;
	}
	.row .col4:first-child,
	.row .col4:nth-child(2n+3) {
		margin-left:0;
		clear:left;
	}
	.row .col5,
	.row .col5:nth-child(5n+6),
	.row .col6,
	.row .col6:nth-child(6n+7) {
		margin-left:3.5%;
		width:31%;
		clear:none;
	}
	.row .col5:first-child,
	.row .col5:nth-child(3n+4),
	.row .col6:first-child,
	.row .col6:nth-child(3n+4) {
		margin-left:0;
		clear:left;
	}

	.mainMenuWrapper {
		display: none;
		height: 0;
		overflow: hidden;
		transition: all 500ms;
	}
	.mainMenuWrapper.open {
		height: auto;
		display: block;
	}
	.mainMenuWrapper ul {
		position: relative;
		top: 0;
		-webkit-transform: none;
		transform: none;
	}
	.mainMenuWrapper #mainmenu > ul {
		padding: 0 0;
	}
	.mainMenuWrapper ul li {
		float: none;
		border-bottom: 1px solid #3E5461;
	}
	.mainMenuWrapper ul li:last-of-type {
		border-bottom: none;
	}
	.mainMenuWrapper ul li {
		text-align: center;
	}
	.logoMain {
		display: none;
	}
	.home .mainMenuWrapper ul li.hiddenhome {
		width: auto;
		height: auto;
		overflow: hidden;
		opacity: 1;
		transition: none;
	}
	.mainMenuWrapper #menusearch {
		display: none;
	}

	.menuPanel {
		width: 100%;
	}

	#header-container {
		/*margin-top:0;*/
	}
	#header-container #mobilemenu {
		display: -webkit-flex;
		display: flex;
	}

	.searchbox {
		width: 95%;
		height: 40px;
		border: 2px solid #FFF;
		top: 10px;
		-webkit-transform: none !important;
		transform: none !important;
		left: 2.5%;
		position: absolute !important;
	}
	.searchbox input.search {
		border: none;
		font-size: 1.2em;
		width: calc(100% - 100px);
		padding: 10px 10px 10px 40px;
	}
	.searchbox .searchButton {
		display: none;
		font-size: 1.2em;
		width: 100px;
		line-height: 40px;
	}
	.searchbox .search64 {
		display: none;
	}
	.searchbox .search32 {
		display: block;
	}
	.searchbackdrop {
		position: relative;
		width: 100%;
		height: 60px;
		top: 0;
		left: 0;
	}

	#content #content-main article h1,
	.section article h2.title {
		font-size: 2em;
		margin-bottom: 0.2em;
		margin-top: .5em;
	}
	#content #content-main article,
    #content #content-main > header,
    #content #content-main > footer {
		padding: 0 20px;
	}

	#content #content-secondary {
		display:none;
		width:100%;
		margin-left:0;
	}
	#content #content-secondary~#content-main {
		width:100%;
	}
	#content #secondary-menu-button {
		display:block;
	}
	#uibar {
		display:none;
	}
	form.wpcf7-form label {
		width: 100%;
		float: none;
		text-align: left;
	}
	form.wpcf7-form span.wpcf7-form-control-wrap {
		width: 100%;
		float: none;
	}
	form.wpcf7-form input.small, form.wpcf7-form input.medium, form.wpcf7-form input[type="submit"],
	form.wpcf7-form input[type="text"], form.wpcf7-form input[type="email"], form.wpcf7-form textarea {
		width: 100%;
	}


}

@media only screen and (max-width: 850px) {
    header.container3d .card3d.on {
        left: 60%;
    }

    .storage, .dataCenter {
	width:350px!important;
}
}

@media only screen and (max-width: 800px) {
	#content #content-main .mobile-right-padding article .entry-content {
		padding-right: 20px;
	}
}

@media only screen and (max-width: 740px) {

    #content #content-main .product-sidebar~article {
        margin: 0;
        float: none;
        padding: 0 20px;
    }
    #content #content-main .product-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        background: #eeeeee;
        box-sizing: border-box;
        padding: 0 20px 10px;
        overflow-y: visible;
    }
    #content #content-main .product-sidebar .product-sidebar-content {
        max-width: 100%;
        width: 100%;
        float: none;
    }

    .entry-textcol2 .entry-content,
	.textcol2 {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
		-webkit-column-gap: 0; /* Chrome, Safari, Opera */
		-moz-column-gap: 0; /* Firefox */
		column-gap: 0;
	}

	/* Responsive 3 column table */
	table, th, tr, td, tbody, thead {
		display: block;
		box-sizing: border-box;
		border: none;
	}
	th {
		font-size: 1.2em;
		font-weight: 400;
		margin: 10px 0;
	}

	th:nth-child(1n+2) {
		position: absolute;
		top: -9999px;
		left: -9999px;
		border: none;
	}
	tr:first-child {
		border: none;
	}

	tr:nth-child(2n+2) {
		background-color: #fff;
	}
	td {
		position: relative;
		white-space: normal;
		text-align: left;
	}
	td:nth-of-type(3) {
		text-align: left;
	}
	td:nth-child(3n+1) {
		background: #eee;
	}
	.table_finance tr:nth-child(odd) {
		background-color: #eee;
	}
	.table_finance tr:nth-child(even) td {
		background-color: #fff;
	}

    header.container3d .card3d.on {
        left: 60%;
        width: 150px;
    }
    header.container3d .card3d.on.landscape {
        transform:          rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-110px) translateZ(-175px) translateX(0);
        -webkit-transform:  rotateX(30deg) rotateY(30deg) rotateZ(-30deg) translateY(-110px) translateZ(-175px) translateX(0);
        left: 20%;
        width: 100%;
    }
    #content #content-main > header.container3d {
        height: 300px;
    }
	.box.circles {
		margin: 0;
	}
	.box.circles .flex-circle, .box .flex-circle {
		margin: 0 auto 75px;
	}
	.box.circles .flex-circle.no-margin, .box .flex-circle.no-margin {
		margin: 0 auto;
	}

}

@media only screen and (max-width: 600px) {
	.card3d.landscape.on {
		transform:          rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-10px) translateZ(0) translateX(-70px);
		-webkit-transform:  rotateX(30deg) rotateY(20deg) rotateZ(-30deg) translateY(-10px) translateZ(0) translateX(-70px);
	}
	#footer > div {
		width: 100%;
	}

    header.container3d .card3d.on {
        left: 50%;
    }
}

@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 */
	#content-secondary .widget_nav_menu ul.menu > li.menu-item a .menu-arrow {
		background-image: url('img/secondary-menu-arrows2x.png');
		background-size: 42px;
	}

	#sitesettings-panel .closebutton {
		background:transparent url('img/icon_closebutton_white2x.png') left top no-repeat;
		background-size:40px;
	}
}

/* ==========================================================================
   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) ")";
    }

    #content #content-main .agencyContainer article {
    	margin: 0 auto;
    	padding: 0 45px;
    	line-height: 1.7em;
    	flex-basis: 100%;
	}

    .textwidget a.button {
    	width:80%;
    }

    article.agency-project {
    	page-break-after: always;
    }

    h2.title a[href]:after {
        content: " (" attr(href) ")";
        font-size: .5em;
        color:#e7583f;
        display:block;
    }

    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;
    }

    #utahGovHeaderWrapper, .mainMenuWrapper, #headerContainer, #footer, footer.entry-meta,
    #stickyheaderplaceholder, form {
        display: none;
    }

    .projectEntered a {
    	display:none;
    }
}

/*

Use this CSS to provide high-contrast and other accessible changes.
The following class is addded to the body when the user has chosen "High Contrast View"

.accessibilityview

*/

body.accessibilityview {
	background: #000;
	color: #000;
}

.accessibilityview .mainMenuWrapper {
	background: rgba(0,0,0,1);
}

.accessibilityview .mainMenuWrapper.sticky {
	background: rgba(0,0,0,0.95);
}

.accessibilityview .mainMenuWrapper ul a:hover {
	color: #8ae0ff;
}

.accessibilityview ul .logoMain a:hover {
	color: #8ae0ff;
}

.accessibilityview .mainMenuWrapper.sticky ul .logoMain a:hover {
	background: transparent;
}

.accessibilityview h1, .accessibilityview h3, .accessibilityview h5 {
	color: #790400;
}

.accessibilityview .color-flat-red {
	color: #790400;
	border-color: #790400;
}

.accessibilityview .background-flat-red .button:hover, .accessibilityview .magiccircle.red .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #790400;
}

.accessibilityview .background-flat-red {
	background: #790400;
	border-color: #790400;
}

.accessibilityview a.color-flat-red  {
	color: #141f31;
}

.accessibilityview .magiccircle.red:hover, .accessibilityview .magiccircle.red.hovered, .accessibilityview .magiccircle.red.open {
	background: #790400;
	border-color: #790400;
}

.accessibilityview .background-flat-reddark {
	background: #000;
	border-color: #000;
}

.accessibilityview .background-flat-medblue {
	background: #141f31;
}

.accessibilityview .background-flat-blue {
	background: #193756;
	border-color: #193756;
}

.accessibilityview .magiccircle.blue:hover, .accessibilityview .magiccircle.blue.hovered, .accessibilityview .magiccircle.blue.open {
	background: #193756;
	border-color: #193756;
}

.accessibilityview .background-flat-blue .button:hover, .accessibilityview .magiccircle.blue .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #193756;
}

.accessibilityview .background-flat-green {
	background: #1a3500;
}

.accessibilityview .background-flat-green .button:hover, .accessibilityview .magiccircle.green .button:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #1a3500;
}

.accessibilityview .magiccircle.green:hover, .accessibilityview .magiccircle.green.hovered, .accessibilityview .magiccircle.green.open {
	background: #1a3500;
	border-color: #1a3500;
}

.accessibilityview .button:hover {
	background: #294352;
	color: #ffffff;
	border-color: #294352;
}

.accessibilityview #footer h3 {
	color: #fff;
}

.accessibilityview .icon.search64.home:hover, .accessibilityview .icon.search64.home.hovered {
	background-color: #005540;
	border-color: #005540;
}

.accessibilityview .color-white {
	color: #fff;
}

.accessibilityview .revdropshadowtext, .accessibilityview .revdropshadowtext h2, .accessibilityview .revdropshadowtext a {
	color: #fff;
	font-weight: normal;
}

.accessibilityview .reverse-color,
.accessibilityview .reverse-color a,
.accessibilityview .reverse-color h1,
.accessibilityview .reverse-color h2,
.accessibilityview .reverse-color h3,
.accessibilityview .reverse-color h4 {
	color: #ffffff;
}

.accessibilityview a {
	color: #141f31;
}

.reverse-color a.button {
	color: #ffffff;
}

.accessibilityview .gray-v {
	background:#000;
}


/* He He */
.dice {
	transition: none;
	display: none;
}
.dice span {
	color: #ffffff;
	font-size: 85px;
}
.dice.die2 span {
	transform: translate(-50%,calc(-50% - 96px));
}
.dice.die1 {
	width: 200px;
	height: 110px;
	background: #e7583f;
	position: relative;
}
.dice.die1:before {
	content: "";
	position: absolute;
	top: -60px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 60px solid #e7583f;
}
.dice.die1:after {
	content: "";
	position: absolute;
	bottom: -60px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 60px solid #e7583f;
}

.dice.die2 {
	position: relative;
	width: 136px;
	border-width: 126px 45px 0;
	border-style: solid;
	border-color: #559500 transparent;
	transform: translate(-50%,calc(-50% + 34px));
}
.dice.die2:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -213px;
	left: -45px;
	border-width: 0 113px 87px;
	border-style: solid;
	border-color: transparent transparent #559500;
}

.dice.die3 {
	position: relative;
	border-radius: 0;
	background-color: #3498DB;
	height: 175px;
	width: 175px;
}

a.rollButton {
	margin-top: -55px;
	outline: none;
}