/*------token page-----------------------------*/
@media only screen and (max-width: 40em) {
  .token-hero-content {
    padding: 100px 30px 80px;
  }
  .token-hero-content h5 {
    width: 100%;
  }
  .token-page .dropdown {
    left: 30px;
  }
  .internal-page .content.mobile-content {
    padding: 30px 0px 0px;
    text-align: center;
  }
  .top-token-frame {
    position: relative;
    width: auto;
    padding: 20px;
  }
  .bottom-token-frame {
    position: relative;
    width: auto;
    padding: 20px;
  }
  .bottom-token-frame .cash-pillar {
    width:370px;
  }
  .section-2 .application-overview ul li p.show-on-mobile {
  width:350px;
  margin:0 auto;
  text-align: center;
  display: block;
  }
  .section-2 .application-overview ul li {
  height: auto;
  }
  .earn-snap, .be-snap, .mobile-snap {
    background-size: 300px 239px;
    height: 239px;
    width: 300px;
  }
  .market-activity-container {
    height: auto;
  }
  .market-graph-container {
    width: 90%;
  }
  .token-tech-content {
    padding: 0 30px;
  }
  .token-tech-content ul li {
    width: 100%;
  }
  .token-tech-content ul li:nth-child(n) p {
    padding-right: 0;
    padding-left: 0;
  }
  .token-square-bg {
    top:10%;
  }
  .token-square:nth-child(3) {
    top:11%;
  }
  .token-list {
    width: 50%;
  }
  .token-list.token-distribution-list {
    width: 100%;
  }
  .token-list.token-proceeds-list {
    width: 100%;
  }
  .section-7 section {
    width: 100%;
  }
  .footer ul {
    padding: 14px 32px;
    width: 100%;
  }
  .section-2 .application-overview ul li.left-aligned {
  padding: 0;
  }
  .section-1 {
    padding:70px 20px 80px;
  }
  .section-1 .abstract-image-placeholder-2 {
    top: 1000px;
  }
  .bottom-token-frame .payout-selection {
  width: 100px;
  }
  .profile-button {
    margin: 0 auto;
  }
}
/*------how it-works page + index-alt-----------------------------*/
@media only screen and (max-width: 40em) {
  #how-it-works-page {
    margin-top:-6px;
  }
  .sum-content-image-container {
    top:20px;
    left: 40px;
    transform:scale(.6);
  }
  .capture-main.sum-content .content.right {
    padding-right:30px;
    width:100%;
    background: #fff;
  }
  .control-main.sum-content .content.left {
    padding-left:30px;
    width:100%;
  }
  .profit-main.sum-content .content.right {
    padding-right:30px;
    width:100%;
    background: #fff;
  }
  .profit-main .profit-img-container {
    transform:scale(.6);
    left: 0;
    top:0;
  }
  .secondary-content#faq-section { 
    padding: 100px 30px;
    background:#fff;
  }
  .secondary-content#faq-section .question-snippet i { 
    display: none;
  }
  .section-3 .product-interstitial { 
    padding:0px 20px 80px;
    background:#e8ebf2;
  }
  .internal-page .section-2a .content {
    padding:60px 0;
  }
  .token-slot-box {
    border-bottom: 900px solid #e8ebf2;
    border-left: 100px solid transparent;
    border-right: 98px solid transparent;
    height: 0;
    width: 100%;
    transform: rotateX(-85deg);
    -webkit-backface-visibility: hidden;
    border-radius: 20px 20px 0 0;
    margin-top: -327px;
  }
  .token-breakdown-usage {
    margin-top:-408px;
  }
  .section-2a .product-interstitial ul li {
    width: 100%;
  }
  .bio-stats {
    display: none;
  }
  .breakpoint {
    width: 65%;
  }
  .overview .control-placeholder {
    margin-left:-26px;
  }
  .overview .profit-placeholder {
    margin-left:-20px;
  }
  .control-access-content {
    margin-top:-120px;
  }
  #how-it-works-page .control-image-container .content {
    padding-top:60px;
    margin-left: 0px;
  }
  #how-it-works-page .profit-image-container .content {
    padding-top:90px;
    margin-left: 20px;
  }
}

/*------about page-----------------------------*/
@media only screen and (max-width: 40em) {
  .token-page #header .content {
    padding: 14px 30px 9px;
  }
  .menu.expanded-menu .notif-status {
    display: none;
  }
  .section-1 ul li {
  width: 100%;
  }
  .ico-content h5 {
    padding:0;
  }
  .exchange-facts ul li {
    width: 100%;
    padding-bottom:30px;
  }
  .product-interstisial {
  border-top:none;
  padding-top:0px;
  }
  .connection-spot-container {
    margin:10px 20px;
  }
  .top-token-frame .pillar.visa-pillar {
    top:-68px;
    left:44px;
  }
  .top-token-frame .pillar.tw-pillar  {
    top:-190px;
    left:150px;
  }
  .top-token-frame .pillar.lk-pillar {
    top: -266px;
    left: 255px;
  }
  .top-token-frame .pillar.health-pillar {
    top: 193px;
    left: 45px;
  }
  .top-token-frame .pillar.apple-pillar {
    top: 195px;
    left: 150px;
  }
  .top-token-frame .pillar.goog-pillar {
    top: 108px;
    left: 255px;
  }
  .internal-page .profit-image-container .content.mobile-content {
    height:auto;
    max-height: 340px;
    display:block;
  }
  .middle-token-frame {
    margin:-60px 0 30px -50px;
  }
  .bottom-token-frame {
    margin:-100px 0 30px -10px;
    padding:50px 20px
  }
  .number-step {
    text-align: center;
    display: block;
    width: 100%;
    height: 40px;
  }
}


/*------about page-----------------------------*/
@media only screen and (max-width: 40em) {
  .about-user-figure {
    display: none;
  }
  #about-page .application-overview .content {
    padding:80px 30px 30px;
  }
  #about-page .application-overview .left {
  width: 100%;
  }
  #about-page .application-overview .right {
  width: 100%;
  }
  #about-page .application-overview .bio-content {
    display: inline-block;
    padding: 0px 0px;
    vertical-align: top;
    width: 100%;
  }
}
/*------campaign page-----------------------------*/
@media only screen and (max-width: 40em) {
  .campaign-hero {
    margin-top:-10px;
  }
  .campaign-hero .content {
    padding:20px 0;
  }
  .capture-main.campaign-content ul li {
    width: 50%;
  }
}
/*------landing page-----------------------------*/
@media only screen and (max-width: 40em) {
  #header .content {
    padding: 14px 30px 9px;
    border-bottom:1px solid #E8EBF2;
  }
  #header.external-header .title-container {
    display: none;
  }
  #header.external-header .logo p {
  display: none;
 }
  #ewd-landing .hero {
  padding:0px 20px 80px;
  min-height: 480px;
  margin-top:-20px;
  }
  #ewd-landing .hero .content {
    width:auto;
  }
  #ewd-landing .hero .content .account-button {
    display: none;
  }
  #ewd-landing .hero h1 {
  font-size: 50px;
  line-height: 54px;
  margin-top:180px;
  }
  #how-it-works-page .overview .content {
  padding:40px 10px;
  }
  .overview.security-section .left, .overview.security-section .right {
  width: 100%;
  }
  #ewd-landing .overview.info-section button {
    margin-right: 10px;
  }
  #ewd-landing .inner-button-container {
    width:150px;
  }
  .ewd-connect-page .horizontal-menu {
    height: auto;
  }
  .ewd-connect-page .horizontal-menu .right {
    float: none !important;
    width: 100%;
  }
  .ewd-connect-page .horizontal-menu ul {
    padding:26px;
    width: 100%;
  }
  .ewd-connect-page .horizontal-menu ul li {
    width: 100%;
    padding:5px 0;
    text-align: center;
  }
  .footer-button-group {
    display: block;
    padding:16px 0px;
    width: 90%;
    margin:0 auto;
  }
  .footer-button-group .account-button {
    float:left;
    margin-right:10px;
  }
  .footer-button-group .account-button.landing-button.learn-more-button {
   margin-left: 10px;
}
  .hero-img-container {
    top: 30%;
    left: 47%;
    transform: translate(-50%,-50%);
    margin: 0 auto;
  }
  #press {
    height: 150px;
    display: inline-block;
  }
  #press .content {
  padding:16px;
  }
  .press-logos li {
    width: 33.33%;
    margin-bottom:20px;
  }
  .press-logos .press-logo {
    -webkit-transform:scale(.8);
    /* Safari and Chrome */
    -moz-transform:scale(.8);
    /* Firefox */
    -ms-transform:scale(.8);
    /* IE 9 */
    -o-transform:scale(.8);
    /* Opera */
    transform:scale(.8);
  }
  .overview ul li {
    width: 100%;
    margin-top:20px;
  }
  #ewd-landing .overview ul li h4 {
    margin-top:0px;
  }
  #ewd-landing h1 {
    font-size: 50px;
    line-height: 54px;
  }
  .overview .content {
    padding:50px 30px 0px;
    display: inline-block;
  }
  .overview.info-section {
   height: auto;
   display: inline-block;
  margin-top: -5px;
  padding-bottom:80px;
  }
  .spectrum-content ul li {
    width:33.33%;
  }
  #ewd-landing-page .spectrometer-callout {
    padding: 28px 14px;
  }
  .hide-on-mobile {
   display: none !important;
  }
  .show-on-mobile {
    display: inline-block;
  }
  #ewd-landing .application-overview {
    height:1670px;
  }
  #ewd-landing .application-overview .content {
  padding: 50px 20px 60px;
  }
#ewd-landing .application-overview .content h1 {
  margin-top:-6px;
}
  .application-overview ul li {
    width: 100%;
    height: 380px;
  }
  .application-overview ul li  p:last-child {
    display: inline-block;
    width: 60%;
  }
  .horizontal-menu .spectrometer-menu {
    padding: 15px 20px;
  }
  .profile-screenshot-container {
    width: 250px;
  }
  .mobile-pub-profile-screenshot {
    display: inline-block;
    background: url("../img/mobile-pub-profile-screenshot.png") no-repeat;
    height: 391px;
    width: 240px;
    margin: 19px auto 0;
    background-size: 240px 391px;
    border-radius: 3px 3px 0 0;
  }
  #ewd-landing .cta-section  {
  height: auto;
  padding:40px 0 0;
  }
  .profile-screenshot-container {
  height: 410px;
  }
  #ewd-landing .cta-section p {
  margin:20px;
  }
  .footer.alt-footer .content {
    text-align: center;
    padding: 50px 20px;
  }
  .footer .content ul li  {
    width: 50%;
  }
  .full-footer {
    padding:40px 0 0 0;
  }
  #ewd-landing-page .pub-profile-header .title-container {
  width: 75%;
  }
  .spectrum-breakdown ul li  {
    width:100%;
    height:auto;
    border-bottom: 1px solid rgba(85, 119, 188, 0.2);
  }
  .element-list {
    display: inline-block;
  }
  .spectrum-breakdown ul li .element-list {
    text-align: left;
    height: auto;
  }
  .cta-section .spectrum-title-tile  {
    vertical-align: top;
    margin: 6px 36px;
  }
  #ewd-landing.pub-user-profile .cta-section {
    height: auto;
  }
  .sample-cta {
    border-top:none;
    background: none;
  }
  .application-overview ul li.right-aligned {
    text-align: right;
  }
}


/*------app-----------------------------*/


@media only screen and (max-width: 70em) {
  #header .content {
  padding:14px 16px 9px;
  }
  .ewd-dashboard-page .dash-tile {
   width:50%;
 }
}
@media only screen and (max-width: 40em) {
  .ewd-dashboard-page .dash-tile {
   width:100%;
 }
 #header .content .logo-container span {
   display: none;
 }
  #ewd-payout-page .settings-content {
  width: 350px;
  }
  #ewd-payout-page .payout-option .payout-form-body {
    width: 350px;
    display: block;
  }
  #ewd-payout-page .accept-btn {
  width: 100%;
  }
  #ewd-payout-page .payout-provider  {
  display: none;
  }

}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */

@media print {
  * {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}