/*! Icy Off-Canvas */
/* ----------------------------------------------------------- */
/**
 * v0.1 | by Marek Simko | MIT License
 */
body {
  overflow-x: hidden;
}

.ioc-overlayer {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
}

.ioc {
  display: none;
  position: absolute;
  bottom: 0;
  top: 0;
  width: 80%;
}

@media only screen and (min-width: 28.125em) {
  .ioc {
    width: 15.625rem;
  }
}

.ioc.active-side-left {
  display: block;
  left: -80%;
}

@media only screen and (min-width: 28.125em) {
  .ioc.active-side-left {
    left: -15.625rem;
  }
}

.ioc.active-side-right {
  display: block;
  right: -80%;
}

@media only screen and (min-width: 28.125em) {
  .ioc.active-side-right {
    right: -15.625rem;
  }
}

.ioc-site-wrapper {
  transition: transform 200ms ease;
  width: 100%;
}

.ioc-site-wrapper.active-side-left {
  -webkit-transform: translate3d(80%, 0, 0);
  transform: translate3d(80%, 0, 0);
}

@media only screen and (min-width: 28.125em) {
  .ioc-site-wrapper.active-side-left {
    -webkit-transform: translate3d(15.625rem, 0, 0);
    transform: translate3d(15.625rem, 0, 0);
  }
}

.ioc-site-wrapper.active-side-right {
  -webkit-transform: translate3d(-80%, 0, 0);
  transform: translate3d(-80%, 0, 0);
}

@media only screen and (min-width: 28.125em) {
  .ioc-site-wrapper.active-side-right {
    -webkit-transform: translate3d(-15.625rem, 0, 0);
    transform: translate3d(-15.625rem, 0, 0);
  }
}

.ioc-site-wrapper--fallback {
  transition: left 200ms ease;
  width: 100%;
  position: absolute;
  left: 0;
}

.ioc-site-wrapper--fallback.active-side-left {
  left: 80%;
}

@media only screen and (min-width: 28.125em) {
  .ioc-site-wrapper--fallback.active-side-left {
    left: 15.625rem;
  }
}

.ioc-site-wrapper--fallback.active-side-right {
  left: -80%;
}

@media only screen and (min-width: 28.125em) {
  .ioc-site-wrapper--fallback.active-side-right {
    left: -15.625rem;
  }
}

/**
 * Default Stiles For Icy Off-Canvas
 * v0.1 | MIT License
 */
.ioc {
  background-color: #fff;
  font-weight: normal;
  color: #fff;
}

.ioc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.ioc-list li {
  margin: 0;
  background-color: #fff;
}

.ioc-list li.ioc-list-header {
  padding: 10px 5px 10px 15px;
//  background-color: #474747;
  background: #79706c;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size:15px;
}

.ioc-list li a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  border-bottom: solid 1px #ccc;
  background: url(../img/icon-arrow-grey.png) 96% no-repeat;
    background-size: 8px auto;
    -webkit-background-size: 8px auto;
    zoom: 1;              
}

.pc {
//    background: #ff7600;
    color:#fff;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    -o-border-radius: 0.6em;
    -ms-border-radius: 0.6em;
    font-size:10px;
    text-align: center;
    padding:4px 10px;
    float: right;
    border:solid 1px #fff;
    margin-top: -3px;
}


.ioc-list li a i {
    display: inline-block;
    font-size:24px;
    margin-right: 4px;
    width:35px;
    vertical-align: middle;
    text-align: center;                    
}

/*
.ioc.active-side-right {
  box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 0.75);
}

.ioc.active-side-right .ioc-list {
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

.ioc.active-side-right .ioc-list li {
  box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

.ioc.active-side-right .ioc-list li a:focus, .ioc.active-side-right .ioc-list li a:hover, .ioc.active-side-right .ioc-list li a.active {
  box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 0.75);
}
*/