@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

html {
  position: relative;
  min-height: 100%;
}
body {
  padding: 0;
  background: #f1f1f1;
  font-family: 'Open Sans';
  overflow-x: hidden;
  margin: 0 0 70px;
}

/* HEADER */ 
.js-header-wrapper {
  background: #e7e7e7;
  border-top: 3px solid #b0b0b0;
  height: 65px;
  border-bottom: 1px solid #cacaca;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.03);
  box-shadow: 0 0 10px rgba(0,0,0,.03);
  position: fixed;
  top:0px;
  width: 100%;
  z-index: 9999;
  box-sizing: initial!important;
}
.ui_header {
  width: calc(100% - 30px);
  margin: 0 auto;
  position: relative;
}
.ui_logo {
  height: 40px;
  float: left;
  opacity: 1;
  padding-right: 25px;
  margin-top: 11px;
  border-right: 1px solid #b6b6b6;
  backface-visibility: hidden;
  perspective: 1000;
  margin-right: 25px;
  transition: all .3s ease-in-out;
}

.ui_courseHold {
  position: absolute;
  margin-top: 7px;
  left: 180px;
  cursor: default;
  transform:translateX(0) translateZ(0);
  white-space: nowrap;
  backface-visibility: hidden;
  perspective: 1000;
  transition: all .3s ease-out;
}
.ui_courseHold h2 {
  font-size: 15px;
  font-weight: 400;
  margin-top: 5px;
  line-height: initial!important;
  color: #676767;
  text-transform: uppercase;
  float: left;
  margin-bottom: -5px;
  -webkit-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}
.ui_courseHold span {
  font-size: 0;
  transition: all .3s ease-in-out;
  position: relative;
  top: -3px;
}
.ui_courseHold h1 {
  font-size: 20px;
  float: left;
  clear: left;
  margin-top: 0;
  margin-bottom: 0;
  line-height: initial!important;
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/* FOOTER */
.js-footer-wrapper {
  bottom: 0;
  height: 50px;
  position: fixed;
  z-index: 99;
  width: 100%;
  background: #e7e7e7;
  border-top: 1px solid #cacaca;
  box-sizing: initial!important;
}
.js-footer-wrapper a{
  color: inherit;
  text-decoration: inherit;
}
.ui_copyrightSeperator{
  height: 14px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  width: 1px;
  background: #ccc;
  position: relative;
  top: 3px;
}
.ui_copyrightLink {
  border-bottom: 1px solid #bbb;
}
.ui_copyrightLink:hover {
  color: #006A8E;
  border-bottom: 1px solid #006A8E;
}
.ui_disclaimerLink {
  border-bottom: 1px solid #aaa;
}
.ui_disclaimerLink:hover {
  color: #006A8E;
  border-bottom: 1px solid #006A8E;
}
.ui_footerBar {
  bottom: 0;
  left: 15px;
  position: fixed;
  padding-top: 0;
  height: 41px;
  width: calc(100% - 30px);
}
.js-footer-wrapper .ui_logo {
  float: none;
  padding-right: 0;
  margin-top: 0;
  border-right: 0;
  backface-visibility: hidden;
  perspective: 1000;
  margin-right: 0;
  height: 30px;
  left:0px;
  opacity:0;
  position: absolute;
  transform: translateX(-125px);
  transition: all .3s ease-in-out;
}
.ui_copyright {
  padding-top: 6px;
  float: left;
  cursor: default;
  font-size: 13px;
  padding-bottom: 6px;
  transition:all .3s ease-in-out;
}
.ui_fullCopyright {
  display: inline-block;
}


/* DARK THEME */
.darkItem{
  display:none;
}
.dark {
  background: #202020;
}
.dark .darkItem{
  display:block;
}
.dark .lightItem{
  display:none;
}
.dark .js-header-wrapper {
  background: #303030!important;
  border-top: 3px solid #535353!important;
  border-bottom: 1px solid #404040!important;
}
.dark .ui_courseHold h2 {
  color: #adadad;
}
.dark .ui_courseHold h1 {
  color: #fff;
}
.dark .js-footer-wrapper {
  background: #303030;
  border-top: 1px solid #404040;
}
.dark .ui_copyright {
  color: #fff;
}
.dark .ui_copyrightLink:hover {
  color: #2d9fff;
  border-bottom: 1px solid #00a4db;
}
.dark .ui_disclaimerLink:hover {
  color: #2d9fff;
  border-bottom: 1px solid #00a4db;
}

@media (max-width: 900px) {
.dark footerBar {
  background:#303030;
  border-top: 1px solid #404040
}
.ui_logo {
  transform: translateX(-180px) translateZ(0);
  opacity:0;
}
.ui_courseHold{
  transform:translateX(-180px) translateZ(0); 
}
.js-footer-wrapper .ui_logo {
  opacity:1;
  transform: translateX(0px);
}
.ui_copyright{
  transform: translateX(115px);
}
.js-footer-wrapper {
  position: fixed;
}
}

@media (max-width: 500px) {
.ui_fullCopyright {
    display: none;
}
.ui_copyrightSeperator{
  display:none;
}
.ui_disclaimerLink{
  margin-left:8px;
}
.ui_copyright {
  float: right;
  right:115px;
  position:absolute;
  border-left: 0!important
}
}