
h1 {
  font-size: 120px;
  font-weight: 500;
  font-family: 'Quicksand', sans-serif;
  color: #FFAA1A;
}
h2 {
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 58px;
}

@media screen and (max-width: 800px) {
  h1 {
    font-size: 15vw;
  }
  h2 {
    font-size: 40px;
  }
}



#subtitle{
  margin: 0px auto 0px auto;
  width: 750px;
  max-width: 100%;

}

.subtitle {
  text-align: center;
  color: white;
}

@media screen and (max-width: 800px) {
  .subtitle {
    font-size: 20px;
  }

}

#features {
  width: 1370px;
  max-width: 100%;
  height: auto;
  margin: auto;
}


#features-inner {

  width: 100%;
}

.features-column {
  width: 500px;
  max-width: 45%;

  display: block;
  padding-bottom: 28px;


}

.feature {
  color: white;
 /* font-size: 22px;
  font-family: 'Quicksand', sans-serif;*/
}

.features-right {
  float: right;
}

.features-left {
  float: left;
  margin-right: 35px;
}

@media screen and (max-width: 599px) {
  .features-left {
    float: right;
    width:100%;
    margin-right: 0px;
    max-width: 100%;
  }
  .features-right {
    width:100%;
    max-width: 100%;
  }
}
/*
@media screen and (max-width: 800px) {
  .feature {
    font-size: 16px;
  }
}
*/

body {
    background-color: #044794;

}
/*
#wrapper-inner {
  background-image: url("../images/world-background.svg");
  background-repeat: no-repeat;
  background-position: 50% 0px;
  background-size: 100%;
}
*/
#wallet {
  width: 1412px;
  max-width: 100%;
  margin: auto;
  height: auto;

  background-image: url("../images/lines-with-wallet.svg");
  background-position: 50.5% 0px;
  background-size: 58.5%;
  background-repeat: no-repeat;
/*  background-color: #00ff0040;*/
  position:relative;

  padding-bottom: 40%;
  height: 0px;
  overflow: visible;
}

#wallet-text-right {
  width: 20.5%;/*auto;*/
  float: right;
  overflow: auto;
  padding-left: 10px;
  box-sizing: border-box;
}

#wallet-text-left {
  float: left;
  width: 20.5%;
  padding-right: 10px;
  position: relative;
  vertical-align: middle;
  box-sizing: border-box;
  height: auto;
/*  background-color: red;*/
  text-align: right;
}

#wallet-text-left-filling {
  width: 100%;
  padding-top: 64%;
}

#wallet-text-bottom {
  width: 42.5%;
  /*max-width: 430px;*/
  /*left: 950px;*/
/*  background-color: #80000080;*/
  /*float: right;*/
/*  padding-bottom: 10%;*/
  position: absolute;
  right: 0px;
  padding-right: 20%;
  box-sizing: border-box;
}

#wallet-text-bottom-filling {
  width: 100%;
  padding-top: 135%;
}

#wallet-text-right-filling {
  width: 100%;
  padding-top: 11%;
}

.feature-strong {
/*  font-family: 'Quicksand', sans-serif;
  font-family: 'Questrial', sans-serif;
  font-size: 24px;*/
  color: #B0DD9D;
}
/*
@media screen and  (max-width: 800px) {
  .feature-strong {
    font-size: 17px;
  }
}*/
/*
@media screen and  (max-width: 1412px) {
*/
  /*
  #wallet-text-bottom-filling {
    padding-top: 70%;
    height: auto;
  }
  #wallet-text-bottom {
    max-width: 100%;
    left: 57%;*/
    /*background-color:  grey;*/
/*  }*/
/*
}*/

@media screen and (max-width: 500px) {
   #wallet{
     background-image: url("../images/lines-mobile.svg");
     background-size: 10.3%;
     background-position: 45% 0%;

     padding-bottom: 70%;
   }
   #wallet-text-right {
     width: 47%;
     overflow: auto;
     padding-left: 0px;
/*     background-color: #ff00ff80;*/
   }
   #wallet-text-bottom {
     width: 47%;
     padding-right: 0px;
     /*overflow: auto;*/
  /*   background-color: #ff00ff80;*/

   }
   #wallet-text-left {
     width: 40%;
  /*   background-color: #ff00ff80;*/

   }
   #wallet-text-left-filling {
     padding-top: 42%;
   }
   #wallet-text-bottom-filling {
     padding-top: 70%;
   }
   #wallet-text-right-filling {
     padding-top: 0%;
   }
}


.footer-icon {
  background-color: #044D97;
}


#warranty {
   background-image: url("../images/warranty-background.svg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 1108px;
   height: auto;
   max-width: 100%;
   margin:auto;
}

#warranty-left {
  width: 42.42%;
  padding-top: 22%;
  padding-bottom: 23%;
  padding-left: 15%;
  box-sizing: border-box;
  display: inline-block;
}

#warranty-check{
    width: 55%;
    height: 0px;
    padding-top: 60%;
    background-image: url("../images/check-warranty.svg");
    background-repeat: no-repeat;
    position: relative;
    background-position: 50% 50%;
    background-size: 100% 100%;

    animation-name: rotate-check-warranty-out;
    animation-duration: 0.5s;
}
#warranty-check:hover{
  transform: rotate(-13deg);
  animation-name: rotate-check-warranty-in;
  animation-duration: 0.5s;
}

/* Standard syntax */
@keyframes rotate-check-warranty-in {
  from {transform: rotate(0deg);}
  to {transform: rotate(-13deg);}
}
@keyframes rotate-check-warranty-out {
  from {transform: rotate(-13deg);}
  to {transform: rotate(0deg);}
}

#warranty-right {
    width: 57.58%;
    padding-top: 6%;
    float: right;
    padding-right: 19%;
    box-sizing: border-box;
    text-align: left;

    /*font-size: 24px;
    font-family: 'Quicksand', sans-serif;*/
    /*line-height: 28px;*/
    display: block;
    padding-bottom: 28px;
    color: white;
}
/*
@media screen and (max-width: 950px) {
  #warranty-right {
      width: 57.58%;
      padding-top: 8%;
      padding-right: 15%;
  }
}*/

@media screen and (max-width: 950px) {
  #warranty {
    background-image: url("../images/warranty-background-smallscreen.svg");

  }
  #warranty-left {
    width: 35%;
    padding-top: 25%;
    padding-bottom: 29%;
    padding-left: 8.5%;
    box-sizing: border-box;
    display: inline-block;
  }
  #warranty-right {
      width: 62%;
      padding-top: 3%;
      padding-right: 10%;
      /*font-size: 10px;*/
      /*line-height: 14px;*/
  }
}
@media screen and (max-width: 500px) {
  #warranty {
    background-image: none;
    background-color: #175895;
    border-radius: 20px;
    height: auto;
    box-sizing: border-box;
  }
  #warranty-left {
    display: none;
  }
  #warranty-right {
    /*display: block;*/
    float: none;
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
  }
}

#page-footer-blue-background {
    padding-top: 8%;
    background-color: #11569C;
}

.separator-world {
  width: 100%;
  height: 0px;
  padding-top: calc(3% + 130px);
}
