#template {transition: filter 500ms ease;}
/*toggle button*/
.loggedIn #accessibilityTool a.toggle {top: 65px;}
#accessibilityTool a.toggle {display: flex;align-items: center;justify-content: center;width:2.5em;height:2.5em;margin: 0;padding:0;background-color: #1B4581;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);border:none;border-radius:4px;outline:0;color:#fff;font-size:16px;line-height:0;cursor:pointer;-webkit-transition:all .25s ease-in-out,box-shadow .15s ease-in-out;transition:all .25s ease-in-out,box-shadow .15s ease-in-out;text-decoration: none;position: fixed;top: 50px;right: 5px;z-index: 9999;max-width: 50px;max-height: 50px;animation: tool 500ms infinite alternate ease-in-out;}
#accessibilityTool a.toggle:hover, #accessibilityTool a.toggle:focus {-webkit-box-shadow:inset 0 0 0 3px #fff;box-shadow:inset 0 0 0 3px #fff}
#accessibilityTool a.toggle::before{display:inline-block;font-family:FontAwesome;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:auto;line-height:1em}
#accessibilityTool a.toggle::before{content:'\f193'}
/*overlay*/
#accessibilityTool > div.menu > div.overlay {display: none;position: absolute; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; justify-content: center; align-items: center;}
#accessibilityTool > div.menu > div.overlay.show {display: flex;}
#accessibilityTool > div.menu > div.overlay > div.message {background-color: #f3f3f3; max-width: 80%; padding: 10px; border: 2px solid #3a3a3a; text-align: center;}
#accessibilityTool > div.menu > div.overlay > div.message p {color: #252525;}
#accessibilityTool > div.menu > div.overlay > div.message a {display: block; max-width: 125px; background-color:#252525; color: #f3f3f3; border: 1px solid #dddddd;margin: 0 auto;text-decoration: none;padding: 5px;}
/*menu*/
/*first row*/
#accessibilityTool > div.menu > div.row.help {padding: 0 !important;}
#accessibilityTool > div.menu > div.row.help p {padding: 5px 0 !important;color: #252525 !important;font-size: 12px !important;line-height: normal !important;margin: 0 !important;}
#accessibilityTool > div.menu {visibility: hidden; /*border-radius: 20px;*/ overflow: hidden; border: 1px solid #ABABAB; position: fixed; top: 40px; right: 15px; width: 275px; z-index: 9998; opacity: 0; transition: 200ms ease opacity;}
.loggedIn #accessibilityTool > div.menu {top: 120px;}
#accessibilityTool > div.menu.show {visibility: visible; opacity: 1;}
#accessibilityTool > div.menu > div.row {text-align: center;}
#accessibilityTool > div.menu > div.row:nth-of-type(odd) {background-color: #F0F0F0;}
#accessibilityTool > div.menu > div.row:nth-of-type(even) {background-color: #DEDEDE;}
#accessibilityTool > div.menu > div.row:not(:first-child):not(:last-child) {box-shadow: inset 0 0 0 1px #fff;padding: 15px;}
/*#accessibilityTool > div.menu > div.row:first-child {height: 30px; border-bottom: 1px solid #000;}
#accessibilityTool > div.menu > div.row:last-child {height: 30px; border-top: 1px solid #000;}*/
#accessibilityTool > div.menu > div.row span {text-transform: uppercase; font-family: Arial; font-weight: 400; display: inline-block; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.025), 1px -1px 0 rgba(0, 0, 0, 0.025), -1px 1px 0 rgba(0, 0, 0, 0.025), 1px 1px 0 rgba(0, 0, 0, 0.025);}
/*slider for grayscale */
#accessibilityTool input[type="range"] {-webkit-appearance: none; background: linear-gradient(to right, #000000 5%,#ffffff 85%); border: 1px solid #ABABAB; height: 35px; width: 100%; margin: 0; padding: 0;}
#accessibilityTool input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; border: 7px solid #fff; height: 45px; width: 45px; border-radius: 0px; background: transparent; cursor: pointer; margin-top: -1px; box-shadow: 0;}
#accessibilityTool input[type=range]::-moz-range-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer;}
#accessibilityTool input[type=range]::-ms-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer;}
/*contrast and fontsize*/
#accessibilityTool > div.menu > div.row > div.top ul {list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around;}
#accessibilityTool > div.menu > div.row > div.top ul li {}
#accessibilityTool > div.menu > div.row > div.top ul li a {display: inline-block; text-decoration: none; color: #000;}
/*contrast circles*/
#accessibilityTool ul.contrast li a {display: inline-block;height: 45px;width: 45px;border-radius: 50%;overflow: hidden;border: 1px solid #C0C0C0;transition: box-shadow 300ms ease;}
#accessibilityTool ul.contrast li:first-child a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #c3c3c3 51%, #c3c3c3 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#c3c3c3 51%,#c3c3c3 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#c3c3c3 51%,#c3c3c3 100%);}
#accessibilityTool ul.contrast li:nth-child(2) a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #f2f2f2 51%, #f2f2f2 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#f2f2f2 51%,#f2f2f2 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#f2f2f2 51%,#f2f2f2 100%);}
#accessibilityTool ul.contrast li:last-child a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);}
#accessibilityTool ul.contrast a.active, #accessibilityTool ul.contrast a:hover, #accessibilityTool ul.contrast a:focus {box-shadow: 0 0 0 5px #fff;}
/*invert*/
#accessibilityTool a.invert {margin: 0 10px; border: 1px solid #ABABAB; background-color: #000; height: 37px; position: relative; display: flex; align-items: center; justify-content: center; transition: background-color 250ms ease;}
#accessibilityTool a.invert.active {background-color: #fff;}
#accessibilityTool a.invert:after {content: ""; position: absolute; height: 15px; width: 50%; background-color: #fff; transition: background-color 250ms ease;}
#accessibilityTool a.invert.active:after {background-color: #000;}
#accessibilityTool a.invert:hover:after {position: relative; top: 1px;}
/*font*/
#accessibilityTool > div.menu > div.row > div.top ul.font {align-items: flex-end;}
#accessibilityTool > div.menu > div.row > div.top ul.font li a {padding: 2px 7px;line-height: normal; transition: background-color 250ms ease; text-transform: uppercase;}
#accessibilityTool > div.menu > div.row > div.top ul.font li:first-of-type a {font-size: 20px;}
#accessibilityTool > div.menu > div.row > div.top ul.font li:nth-of-type(2) a {font-size: 30px;}
#accessibilityTool > div.menu > div.row > div.top ul.font li:last-of-type a {font-size: 40px;}
#accessibilityTool > div.menu > div.row > div.top ul.font li a.active, #accessibilityTool > div.menu > div.row > div.top ul.font li a:hover, #accessibilityTool > div.menu > div.row > div.top ul.font li a:focus {background-color: #fff;}
/*two col*/
#accessibilityTool > div.menu > div.row.twoCol {display: flex;align-items: flex-end;}
#accessibilityTool > div.menu > div.row.twoCol > div {flex: 1 50%;float: none;}
/*large cursor */
#accessibilityTool a.cursor {display: inline-block; background-color: transparent; transition: background-color 250ms ease;}
#accessibilityTool a.cursor.active, #accessibilityTool a.cursor:hover, #accessibilityTool a.cursor:focus {background-color: #fff;}
#accessibilityTool a.cursor img {max-width: 100%; margin: 5px;}
.largeCursor #template *, .largeCursor #template *:hover, .largeCursor #accessibilityTool *, .largeCursor #accessibilityTool *:hover {}
/*reset*/
@keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
#accessibilityTool > div.menu > div.row.reset {padding: 0 !important}
#accessibilityTool > div.menu > div.row.reset a {font-size: 25px; display: block; padding: 10px;}
#accessibilityTool > div.menu > div.row.reset a span:before {content: "\f021"; font-family: FontAwesome; color: #000;}
#accessibilityTool > div.menu > div.row.reset a:hover span, #accessibilityTool > div.menu > div.row.reset a:focus span {animation-name: spin; animation-duration: 3000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
/*keyframe for main button*/
@keyframes tool {
  0% {
    box-shadow: inset 0 0 0 4px #fff;
  } 
  100% {
    box-shadow: inset 0 0 0 0px #6db6ff;
  }
}