/**
* Demo Stuff
*/
/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/
@media screen and (max-width:321px){
  .nav__items{
    font-size: 12px;
  }
  .nav__triggers {
    top: 0.07rem;
  }
}
@media screen and (min-width: 321px) and (max-width:500px) {
  .nav__items{
    font-size: 14px;
  }
  .nav__triggers {
    top: 0.14rem;
  }
}
@media screen and (min-width: 501px){
  .nav__items{
    font-size: 16px;
  }
  .nav__triggers {
    top: 0.39rem;
  }
}

.iphones {
  /*width: 16.06em;*/
  /*height: 30.6em;*/
  border-radius: 1.875em;
  /*margin: 2em;*/
  position: relative;
  display: inline-block;
  background: #fff;
}
.iphones__item {
  width: 16.06em;
  height: 1em;
  position: absolute;
  bottom: -2em;
  color: #158f76;
  text-align: center;
}
.iphones__screen {
  width: 7.5rem;
  height: 1rem;
  position: absolute;
  top: .79rem;
  left: -6.6rem;
  overflow: hidden;
}
.iphones__content {
  position: relative;
  /*background-color: #D2527F;*/
  width: 100%;
  height: 100%;
}
/**
* Navigation Defaults
*/
.navs {
  position: absolute;
  z-index: 100;
  opacity: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  top:0.9rem;
}
.nav--actives .navs {
  opacity: 1;
  background-color:#fff;
}
.nav__lists {
  margin: 0;
  padding: 0.2rem 0.4rem;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.3);
}
.nav__items {
  list-style-type: none;
  text-align: left;
  margin-bottom: .2rem;
}
.nav__links {
  font-size: 1.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: #333;
  opacity: 1;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
.nav__triggers {
  display: block;
  position: absolute;
  width: .6rem;
  height: .6rem;
  left: 6.9rem;
  z-index: 200;
  background-color: #fff;
  text-align: center;
}
.nav--actives .nav__triggers {
  /*opacity: 0.5;*/
}
.nav__icons {
  display: inline-block;
  position: relative;
  width: 0.42rem;
  height: 0.06rem;
  background-color: #005fb4;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.nav__icons:before,
.nav__icons:after {
  content: '';
  display: block;
  width:  0.42rem;
  height: 0.06rem;
  position: absolute;
  background: #005fb4;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.nav__icons:before {
  margin-top: -0.2rem;
}
.nav__icons:after {
  margin-top: 0.2rem;
}
/* Default navigation icon */
/*.nav__triggers {*/
  /*display: block;*/
  /*position: absolute;*/
  /*width: 1rem;*/
  /*height: 0.7rem;*/
  /*right: 0;*/
  /*top: 0.14rem;*/
  /*z-index: 200;*/
  /*background-color: #fff;*/
  /*text-align: center;*/
/*}*/
/*!*.nav--actives .nav__triggers {*!*/
  /*!*!*opacity: 0.5;*!*!*/
/*!*}*!*/
/*.nav__icons {*/
  /*display: inline-block;*/
  /*position: relative;*/
  /*width: 0.5rem;*/
  /*height: 0.08rem;*/
  /*background-color: #005fb4;*/
  /*-webkit-transition-property: background-color, -webkit-transform;*/
  /*transition-property: background-color, -webkit-transform;*/
  /*transition-property: background-color, transform;*/
  /*transition-property: background-color, transform, -webkit-transform;*/
  /*-webkit-transition-duration: 300ms;*/
          /*transition-duration: 300ms;*/
/*}*/
/*.nav__icons:before,*/
/*.nav__icons:after {*/
  /*content: '';*/
  /*display: block;*/
  /*width: 0.5rem;*/
  /*height:0.08rem;*/
  /*position: absolute;*/
  /*background: #005fb4;*/
  /*-webkit-transition-property: margin, -webkit-transform;*/
  /*transition-property: margin, -webkit-transform;*/
  /*transition-property: margin, transform;*/
  /*transition-property: margin, transform, -webkit-transform;*/
  /*-webkit-transition-duration: 300ms;*/
          /*transition-duration: 300ms;*/
/*}*/
/*.nav__icons:before {*/
  /*margin-top: -0.145rem;*/
/*}*/
/*.nav__icons:after {*/
  /*margin-top: 0.145rem;*/
/*}*/
/* Don't nest if you don't have to. */
/**
* Style #1
*/
/**
* Style #5
*/
.style-5 .navs {
  -webkit-transform: translate(100%, -100%) scale(0.5);
          transform: translate(100%, -100%) scale(0.5);
  border-radius: 100%;
}
.style-5 .nav--actives .navs {
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  border-radius: 0;
  width: 100%;
  height: 100%;
  opacity:.9;
}
.style-5 .nav__links{
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-5 .nav--actives .nav__links {
  opacity: 1;
}
.style-5 .nav--actives .nav__icons {
  background: rgba(0, 0, 0, 0);
}
/*.style-5 .nav--actives .nav__icons:before {*/
  /*margin-top: 0;*/
  /*-webkit-transform: rotate(45deg);*/
          /*transform: rotate(45deg);*/
/*}*/
/*.style-5 .nav--actives .nav__icons:after {*/
  /*margin-top: 0;*/
  /*-webkit-transform: rotate(-45deg);*/
          /*transform: rotate(-45deg);*/
/*}*/
.style-5 .nav__icons:before {
  margin-top: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.style-5 .nav__icons:after {
  margin-top: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.style-5 .nav--actives .nav__icons {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
/**