/* responsive styles */
@media screen and (min-width: 768px) and (max-width: 1100px) {

  .mobileOnly {
    display: block;
  }

  header .inner,
  section .sectionInner {
    width: 740px;
  }

  header .inner .navMain ul li {
    padding: 0px 10px;
  }

  header .inner .navMain ul li a {
    font-size: 16px;
  }

  h1 br,
  h2 br {
    display: none;
  }

  .logo {
    width: 250px;
    height: 250px;
  }

  .highlight {
    width: 170px !important;
  }

  .highlight h3 {
    padding-top: 30px;
    background-position: center top;
  }

  section.fourthSection .sectionInner {
    width: 100%;
  }

  .sovereignBoxes {
    display: block;
  }

  .sovereignBoxes .sBox h3 {
    font-size: 16px;
  }

  .sovereignBoxes .sBox {
    width: 200px !important;
    margin: 0px 30px !important;
  }


  .sovereignBoxes .sBox .sBoxTextInner {
    line-height: 16px;
  }

  .notYetInfoMessage {
    display: none;
  }


}


@media screen and (min-width: 1px) and (max-width: 767px) {

  body {
    font-size: 16px;
  }
  .mobileOnly {
    display: block;
  }

  section .sectionInner {
    width: 90%;
  }

  header,
  header.scrolled {
    top: 0px;
  }

  .navMobileTriggers {
    width: 70px;
    height: 50px;
    display: block;

    position: absolute;
    top: 20px;
    right: 20px;

    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
  }

  .navMobileTriggers .line {
    width: 50px;
    height: 3px;
    background: #454545;
    display: block;
    position: absolute;
    left: 10px;
    border-radius: 3px;

    transition: transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, width 0.5s ease-in-out, background-color 0.5s ease-in-out;

  }

  .navMobileTriggers .line-1 {
    top: 17px;
  }

  .navMobileTriggers .line-2 {
    top: 24px;
  }

  .navMobileTriggers .line-3 {
    top: 31px;
  }

  .navMobileTriggers:hover {
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
  }

  .navMobileTriggers.active .line-1 {
    transform: rotateZ(135deg);
    top: 24px;
    left: 20px;
    width: 30px;
  }

  .navMobileTriggers.active .line-2 {
    transform: rotateY(90deg);
  }

  .navMobileTriggers.active .line-3 {
    transform: rotateZ(45deg);
    top: 24px;
    width: 30px;
    left: 20px;
  }

  .navMobileTriggers:hover .line {
    background-color: #6141d2;
  }

  header .inner,
  header.scrolled .inner {
    display: none;
    height: auto;
    width: calc(100% - 120px);
    transform: translateX(-40px);
    margin-top: 20px;
    border-radius: 5px;
  }

  header .inner .navMain ul li,
  header.scrolled .inner .navMain ul li {
    display: block;
    padding: 5px 0px;
    margin: 0px 5px;
    border-left: 0px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }


  header .inner .navMain ul li a,
  header.scrolled .inner .navMain ul li a {
    font-size: 16px;
  }


  section.firstSection .owl {
    background-image: url(../i/owl-custom-still.svg);
  }

  section.firstSection .sectionInner {
    padding-top: 20px;
  }

  .joinUsOn {
    line-height: 15px;
    padding-top: 2px;
    text-align: left;
    display: block;
  }

  .joinUsOn span.label {
    width: 100%;
    padding: 0px;
    font-size: 13px;
    opacity: 0.7;
    display: block;
  }

  .joinUsOn a {
    height: 30px;
    width: 30px;
    margin: 0px 2px;
    position: relative;
    left: -7px;
  }

  .logo {
    width: 150px;
    height: 150px;
  }

  h1,
  h2 {
    font-size: 26px;
    line-height: 32px;
  }

  h1 br,
  h2 br,
  .desktopOnly {
    display: none;
  }

  section.firstSection {
    height: auto;
    padding-bottom: 100px;
  }

  h1 {
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
  }

  section.firstSection .owl {
    background-position: calc(100% + 120px) calc(100% + 80px);
    background-size: 650px auto;
  }


  section.secondSection {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform:  translateY(0%);
    margin-top: -50px;
    padding-bottom: 100px;
  }

  .getMinerva {
    width: 300px;
    margin: 0 auto;
  }

  .getMinerva .androidWrapper,
  .getMinerva .iOSWrapper {
    width: 300px;
    padding-top: 0px;
  }



  .getMinerva .appButton.playStore,
  .getMinerva .appButton.apkDownload  {
    width: 298px;
  }


  .getMinerva .appButton.playStore {
      background-size: 200px auto;
  }

  .getMinerva .appButtons {
    height: auto;
    line-height: 40px;
  }

  .getMinerva .appButtons .or {
    text-align: center;
    padding: 0px;
    width: 100%;
  }

  .getMinerva .separator {
    margin: 50px 0px;
    width: 100%;
    height: 2px;
  }

  .getMinerva .iOSWrapper h2 {
    text-align: center;
  }

  .getMinerva .iOSWrapper .appButtons {
    display: none;
  }

  .getMinerva .iOSWrapper .notYetInfoMessage {
    text-align: center;
    font-size: 13px;
    color: #454545;
    line-height: 17px;
  }

  .getMinerva .iOSWrapper .notYetInfoMessage span {
    font-weight: 500;
  }


  .sectionSeparator {
    top: 0px;
  }

  .thirdSection {
    padding-top: 100px;
  }


  .highlight {
    margin: 0px 0px 50px 0px;
  }



  .left-50,
  .right-50 {
    display: block;
    width: calc(100% - 20px);
    margin: 0px auto;
    padding-top: 0px;
  }

  .pie {
    width: 100%;
    height: 350px;
  }

  .pieLegend .percentage {
    font-size: 18px;
    width: 60px;
  }

  .pieLegend {
    font-size: 14px;
  }

  .addToWallet {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
  }

  .hideOnMobile {
    display: none;
  }

  .mivaTokenInfo .contractAdress {
    font-size: 16px;
    word-wrap: break-word;
  }

  section.fourthSection .sectionInner,
  section.thirdSection .sectionInner {
    width: 100%;
  }

  .sovereignBoxesSwiper {
    padding-bottom: 60px;
  }

  .sovereignBoxes .sBox {
    margin: 0px 0px 0px 0px;
    width: 240px !important;
  }

  .error404 h1 {
    font-size: 50px;
    padding-top: 100px;
  }

  .distributionStatus h3 {
    line-height: 22px;
    padding-bottom: 20px;
  }

  .singleLineMobile {
    display: inline-block;
    width: 100%;
    font-weight: 300;
  }

  .singleLineMobile>span {
    display: inline-block;
  }

  .ninthSection h3 {
    font-size: 20px;
  }

  .getXdaiAddress {
    letter-spacing: 0px;
    font-size: 13px;
    width: 300px;
  }

  .gnosisAuction .buttonWrapper a {
    font-size: 18px;
    line-height: 60px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  @keyframes pulseButton  {
    0%  		{ padding: 18px 40px 5px 40px; }
    50%  		{ padding: 18px 20px 5px 20px; }
    100% 		{ padding: 18px 40px 5px 40px; 	}
  }



  .cooperationItem {
    width: 140px;
    padding: 100px 5px 5px 5px;
    margin: 0px 5px 30px 5px;
  }

  .mainnetItem {
    width: 140px;
    height: 30px;
    padding: 100px 5px 5px 5px;
    margin: 0px 5px 30px 5px;
  }

  .mainnetItem figure,
  .cooperationItem figure {
    width: 100px;
    height: 100px;
    left: 25px;
  }

  .mainnetItem figure img,
  .cooperationItem figure img {
    height: 100%;
    width: auto;
  }

  .mainnetItem h3 {
    font-size: 16px;
    line-height: 20px;
  }

  .testnetItem a span {
    display: none;
  }

  .dappEntry {
    margin-left: 0px;
    margin-right: 0px;
    width: calc(100% - 4px);
    height: 75px;
  }

  .dappEntry a {
    width: calc(100% - 40px);
    padding: 10px 20px;
  }

  .dappListing {
    font-size: 18px;
    line-height: 24px;
  }

  .dappEntry figure {
    left: auto;
    right: 20px;
    top: 15px;
  }

  .cooperationItem h3 {
    line-height: 18px;
  }

  /* temporarely until distributed bar is at 5% */
  .distributionFlows {
    background-position: -5px 60px;
  }


  .deeplinkPage h1 {
    padding-bottom: 0px;
    padding-top: 60px;
  }



  .deeplinkPage .secondSection {
    margin-top: 0px;
  }

  .deeplinkPage section.secondSection .sectionInner {
    padding-top: 50px;
  }

  .socialLinks a {
    margin: 0px;
    height: 40px;
    width: 35px;
  }




}