/*jquery overrides*/

.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
  background-color: #333;
  border-color: #ddd;
  color: #fff;
  text-shadow: 0px 1px 0px #eee;
  font-weight: 700;
}

.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a {
  font-weight: 400;
}

html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a {
  color: #252525;
  font-weight: 400;
}

.ui-page-theme-a a {
  color: #fff;
}

.ui-page-theme-a a.ui-btn-right {
  color: #fff;
}

.ui-header,
.ui-footer {
  border-width: 0px 0px;
  border-style: none;
}

body {
  font: 700 16px/16px 'Arimo', sans-serif;
  color: #808284;
  text-shadow: none;
  background-color: #f4fbfe;
}

header {
  min-height: 80px;
}

.logo {
  max-block-size: 48px;
}

.top-bar h1,
header h1 {
  padding: 0;
  margin: 0;
  font: lighter 15px/23px 'Open Sans', sans-serif;
  /*text-transform: uppercase;*/
  text-shadow: none;
  color: #fff;
  position: relative;
  top: 30px;
  left: 5.5rem;
  position: absolute;
  padding-left: 1.2rem;
}

.burger {
  margin: 10px;
}

.divider {
  padding: 0 90px;
  margin-top: -5px;
}

footer p {
  color: #fff;
  text-shadow: none;
  font: 700 12px/12px 'Arimo', sans-serif;
  text-transform: uppercase;
}

/*Panel Grids*/

.pan-one,
.pan-two,
.pan-three,
.pan-four,
.pan-five,
.pan-six,
.pan-seven,
.pan-eight,
.pan-nine,
.pan-ten {
  text-align: center;
  margin: 15px 0 5px 0;
}

.pan-seven,
.pan-eight {
  margin-bottom: 15px;
}

.pan-one a,
.pan-two a,
.pan-three a,
.pan-four a,
.pan-five a,
.pan-six a,
.pan-seven a,
.pan-eight a,
.pan-nine a,
.pan-ten a {
  font: 400 0.75rem/1.2 'Open Sans', sans-serif;
  color: currentColor;
  text-decoration: none;
}

.round-icon i {
  font-size: 17vw;
}

/*Responsive Icons*/

.round-icon {
  inline-size: 50%;
  border-radius: 50%;
  box-sizing: content-box;
  overflow: hidden;
  margin: 0 auto;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
}

.icon-label {
  margin-top: 10px;
  font: 100 0.8rem/1.2 'Open Sans', sans-serif;
  color: #252525;
  text-decoration: none;
}

/*icon border colors*/

.iconOne {
  color: #ce3d95;
  border: 2px solid currentColor;
}

.iconTwo {
  color: #fbae17;
  border: 2px solid currentColor;
}

.iconThree {
  color: #00a8c8;
  border: 2px solid currentColor;
}

.iconFour {
  color: #932077;
  border: 2px solid currentColor;
}

.iconFive {
  color: #72be44;
  border: 2px solid currentColor;
}

.iconSix {
  color: #006d9e;
  border: 2px solid currentColor;
}

.iconSeven {
  color: #008075;
  border: 2px solid currentColor;
}

.iconEight {
  color: #ed2c67;
  border: 2px solid currentColor;
}

.iconNine {
  color: #fb5d17;
  border: 2px solid currentColor;
}

.iconTen {
  color: #c96cfa;
  border: 2px solid currentColor;
}

/*Page Icons*/

.panel-icon {
  font-size: 30px;
  color: #fff;
}

/*panels*/

.panels {
  padding: 1em;
}

/*Panel navigation*/

.swipe {
  position: absolute;
  top: 235px;
  left: 92%;
  font-size: 2em;
}

.panel-navigation {
  text-align: center;
}

.left {
  float: left;
}

.right {
  float: right;
}

.arrow {
  font-size: 2em;
}

a.btn-close {
  font: 300 20px 'Open Sans', sans-serif;
  color: #fff;
  padding: 0 25px 0 25px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.panel-navigation hr {
  color: #fff;
  color: rgba(255, 255, 255, 0.4);
  border-style: solid;
}

/*Panel Heading*/

.panelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 30px 0;
}

.panelHeader h1 {
  margin: 0;
  font: 300 20px/20px 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  display: inline;
  position: relative;
  top: 13px;
  left: 0;
}

.panels .panel-subheader {
  font: 700 14px/16px 'Arimo', sans-serif;
}

.panels p,
a {
  font: 400 14px/16px 'Arimo', sans-serif;
  color: #fff;
}

.panels a,
.panels a:hover,
.panels a:focus {
  color: #fff;
}

.panel-grouping a,
.panel-grouping a:hover,
.panel-grouping a:focus {
  text-decoration: underline;
}

/*Panel grouping*/

.panel-grouping {
  display: block;
  width: 225px;
  margin-bottom: 20px;
}

.panel-grouping .panel-header {
  font: 700 14px/16px 'Arimo', sans-serif;
  text-transform: uppercase;
}

.panel-grouping .panel-info p {
  font: 400 28px/34px 'Arimo', sans-serif;
  margin-top: 0;
}

.icon-list {
  display: inline-block;
  margin-top: -5px;
}

.icon-list img:first-child {
  margin-right: 15px;
}

/*panel background colors*/

#offCanvasLeftOverlap1 {
  background-color: #ce3d95;
}

#offCanvasLeftOverlap2 {
  background-color: #fbae17;
}

#offCanvasLeftOverlap3 {
  background-color: #00a8c8;
}

#offCanvasLeftOverlap4 {
  background-color: #932077;
}

#offCanvasLeftOverlap5 {
  background-color: #72be44;
}

#offCanvasLeftOverlap6 {
  background-color: #006d9e;
}

#offCanvasLeftOverlap7 {
  background-color: #008075;
}

#offCanvasLeftOverlap8 {
  background-color: #ed2c67;
}

#offCanvasLeftOverlap9 {
  background-color: #fb5d17;
}

#offCanvasLeftOverlap10 {
  background-color: #c96cfa;
}

#offCanvasLeftOverlapNav {
  background-color: #b3b3b3;
}

#offCanvasLeftOverlapInfo {
  background-color: #b3b3b3;
}

.ui-content {
  border-width: 0px;
  overflow-y: visible;
  overflow-x: hidden;
  padding: 0em;
}

.top-bar h1::before,
header h1::before {
  content: '';
  border-right: 1px solid #999;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: -14px;
  left: 8px;
}

/*side panels*/

/*Nav Panel*/

#panelNav .ui-panel-inner a {
  text-decoration: none;
}

ul.nav-primary {
  list-style-type: none;
  display: block;
  margin: 0;
  padding: 0;
}

ul.nav-primary a {
  display: inline-block;
  font: 300 20px 'Open Sans', sans-serif;
  color: #fff;
  margin: 10px 0 10px 0;
  text-decoration: none;
}

.cog {
  color: #fff;
  font-size: 3em;
  position: absolute;
  margin-left: 11px;
  padding-top: 8px;
}

.gear {
  position: absolute;
  top: 185px;
  left: -26px;
  z-index: 12;
  background-color: #999;
  border-radius: 10%;
  width: 65px;
  height: 56px;
}

/*tablet(portrait and landscape)-----*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .pan-one a,
  .pan-two a,
  .pan-three a,
  .pan-four a,
  .pan-five a,
  .pan-six a,
  .pan-seven a,
  .pan-eight a,
  .pan-nine a,
  .pan-ten a {
    font-size: 1.25em;
  }
}

/*Small screen devices below 400-----*/

@media only screen and (min-device-width: 200px) and (max-device-width: 360px) {
  header h1 {
    font: lighter 14px/20px 'Open Sans', sans-serif;
  }
}

/* Foundation over-rides */

.top-bar {
  background-color: #333;
  border-color: #ddd;
  color: #fff;
  text-shadow: 0px 1px 0px #eee;
  font-weight: 700;
}

#offCanvasTopNav {
  background-color: #333;
}

.position-left {
  width: 300px;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
}

@media only screen and (max-device-width: 450px) {
  .top-bar .top-bar-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-right: auto;
  }

  .top-bar .top-bar-right {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-left: auto;
  }
}