/* ------ */
/* COMMON */
/* ------ */

body{
   margin: 0;
   color: #3b3b3a;
   background-color: white;
   font-family: 'Oxygen', sans-serif;
}

ul{
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 0px;
   -webkit-margin-after: 0px;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 0px;
   margin: 0;
   padding: 0;
}

a{
   color: #3b3b3a;
   text-decoration: none;
}

li {
   list-style-type: none;
}

/* ---- */
/* TEXT */
/* ---- */

.s-text{
   font-size: 12px;
}

.m-text{
   font-size: 14px;
}

.l-text{
   font-size: 16px;
}

.xl-text{
   font-size: 22px;
}

.xxl-text{
   font-size: 28px;
}

/* ---- */
/* PAGE */
/* ---- */

.container{
   position: relative;
   margin: 0 auto;
   width: 900px;
   color: #444444;
}

/* ----------- */
/* SEQURA INFO */
/* ----------- */
.promo{
   width: 100%;
}

.title{
   color: #009C5C;
   margin: 25px 5px 20px 5px;
   line-height: 36px;
   text-align: center;
}

.sub-title{
   font-weight: bold;
   text-align: center;
   margin: 50px 0 30px 0;
}

.description{
   text-align: center;
   margin: 20px 5px 0 5px;
   line-height: 22px;
}

.how-works{
   margin: 0 30px 0 30px;
}

.how-works ul{
   width: 100%;
}

.how-works li{
   display: inline-block;
   width: 33%;
   text-align: center;
   line-height: 18px;
}

.how-works li img{
   margin-bottom: 10px;
}

.how-works li img.step1{
   height: 60px;
   margin-bottom: 10px;
}

.how-works li img.step2{
   height: 40px;
   margin-bottom: 10px;
}

.how-works li img.step3{
   height: 47px;
   margin-bottom: 10px;
}

.who-is{
   margin: 0 60px 0 60px;
}

.who-is ul{
   width: 100%;
}

.who-is li{
   display: inline-flex;
   width: 49%;
   text-align: center;
   line-height: 18px;
}

.who-is li div{
   background-color: #009C5C;
   color: white;
   border: solid 12px white;
   padding: 30px;
}

/* ------ */
/* FOOTER */
/* ------ */

.footer{
   width:100%;
   height: 200px;
   font-size: 14px;
   margin-top: 50px;
   padding-top: 40px;
   text-align: center;
   line-height: 30px;
   background-color: #F7F7F7;
}


/* ------ */
/* MOBILE */
/* ------ */

@media only screen and (max-device-width: 480px) {

   .s-text{
      font-size: 11px;
   }

   .m-text{
      font-size: 12px;
   }

   .l-text{
      font-size: 14px;
   }

   .xl-text{
      font-size: 16px;
   }

   .xxl-text{
      font-size: 20px;
   }

   .container{
      padding: 0;
      margin: 0;
      width: 100%;
   }

   .title{
      margin: 25px 45px 20px 45px;
      line-height: 30px;
   }

   .sub-title{
      margin: 50px 40px 30px 40px;
   }

   .description{
      margin: 30px 40px 0 40px;
   }

   .how-works li{
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
      line-height: 18px;
   }

   .how-works li img.step1{
      height: 80px;
   }

   .how-works li img.step2{
      height: 60px;
   }

   .how-works li img.step3{
      height: 67px;
   }

   .who-is{
      margin: 0 10px 0 10px;
   }

   .who-is li div{
      border: solid 5px white;
      padding: 20px;
   }

   .footer{
      font-size: 12px;
   }
}