/* promo code!! */

.right{
  float: right;
}
.pre{ white-space: pre-wrap; }

.product_icon{
  max-width:30%;
}

.muted{
  opacity:0.5;
}



.has-equal-height { /* for columns cards  */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.has-equal-height .card-footer {
  margin-top: auto;
}

.masonry-with-columns {
  columns: 2 ;
  column-gap: 1rem;
}

.columns3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 1rem; /* Chrome, Safari, Opera */
-moz-column-gap: 1rem; /* Firefox */
column-gap: 1rem;
}
.no-col-break{
  display:block;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}

.masonry-with-columns   .item {
  /*margin:  1rem 1rem 0;*/
  width: 100%;
  padding-top:2px;
  margin-bottom: 1rem;
  display: inline-block;

  /*  width: 50%;*/
  /*  background: #EC985A;
    color: white;
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;*/

}
@media screen and (max-width: 700px) {
  .masonry-with-columns {
    columns: 1 ;
    column-gap: 0;
  }
}




p{
  max-width: 25rem;
}

p a.txt, a.txt{
  text-decoration: underline;
  /* TODO: sweet decoration*/
}
.add product_icon{
  max-width:50%;
}

.productCard{
  background: white;
  border-radius: 20px;
  padding-top: 30px;
}



/* REVIEWS  */
.review .fa-star, .review .fa-star-half{
  color:#ff7e00;
}


.cat.tag{
  text-transform: capitalize;
}

.tag.is-mini{
  font-size:0.65rem;
  padding: 1px 12px;
}

.emoji{
  font-size: 4rem;
  display: block;
  line-height: 1.2em;
  margin:0;

}
.emoji.is-medium{
  font-size: 3rem;
  line-height: 1em;
}
.emoji.is-small{
  font-size: 1.5rem;
}

 /* blueish icons
 <img src="/img/iconblue/i_70.png" class="ib">
 */
  .ib{
    height: 6rem;
    display: block;
}
.ib.r{
  float:right; margin-left:20px;
}
.ib.l{
  float:left; margin-right:20px;
}


.inline{
  display: inline-block;

  line-height: 0.3em;
}

ul.emojilist{
  padding-left: 2.7rem;
}
ul.emojilist li:before{
  font-size: 1.5rem;
  content: '\1F95E';
  margin-left: -2.5rem;
  margin-right: 0.8rem;
 }


 ul.emojilist li.checkbox:before{
   content: '☑️';
  }


ul.emojilist li.checked:before{
  content: '☑️';
 }
 ul.emojilist li.buble:before{
   content: '💬';
  }
  ul.emojilist li.helpful:before{
    content: '💁';
   }
   ul.emojilist li.write:before{
     content: '✍';
    }
    ul.emojilist li.landing:before{
      content: '🚀';
     }
     ul.emojilist li.guide:before{
       content: '📈';
      }
      ul.emojilist li.book2:before{
        content: '📕';
       }
       ul.emojilist li.book:before{
         content: '📘';
        }
       ul.emojilist li.fb:before{
         content: '👍';
        }
        ul.emojilist li.try:before{
          content: '🧪';
         }
         ul.emojilist li.robot:before{
           content: '🤖';
          }







.rewards{
  text-align: center;
}

.rewards h3{
  margin-top: 0;
}

.codebox{
  max-width:200px;
  border: 3px #ccc dashed;
}
.field-precision{
  margin-top: -1.5em;
}



.button.is-bluelink{
  color:#0713d0 ; padding-right: 0;font-weight: bold; text-decoration:none;
}

.links .link{

  /* padding-bottom: 1em; */
  border-left: 4px solid #ddd;
  margin-top: 2em;
  padding-top:0.1em;
  padding-bottom:0;
  padding-left:30px;
}


.links .link:after {
  margin-top: 0em;
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;

  border-bottom:1px dashed #fff;
}






section.main-content{
  /*https://stackoverflow.com/questions/4011113/can-you-add-noise-to-a-css3-gradient*/
   background:  #fafafa;
   /*  linear-gradient(rgba(255,255,255,1), rgba(240,240,240,1))*/

   /*   linear-gradient(rgba(255,255,255,1), rgba(0,0,0,0.1)) ,
                url('/img/noise.svg') 0px 0px/ 250px 250px repeat;*/
}
.hero.is-purple {
    background: linear-gradient(159deg, #532ac1 13%, #d54ee6 69%, #fab7a8 100%) #532ac1 ;

    color: white!important;
}

.hero.is-green {
    background: #49f776;
    background:linear-gradient(159deg, #49f776 13%, #26c14e 69%, #81c51d 100%) #49f776;
    color: black!important;
}
.hero.is-purple > p, .hero.is-purple > a, .hero.is-purple > h2{
  color: white!important;
}
.hero.dark article h5, .hero.dark article h2{
  color: white;
}

.hero.dark p, .hero.dark, .hero.dark h1, .hero.dark h2, .hero.dark h3, .hero.dark h3, .hero.dark h4, .hero.dark strong{
  color:white !important;
}

.hero.is-yellow{
  background: #e65c00;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F9D423, #e65c00);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F9D423, #e65c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



    background: #ec008c; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ec008c, #fc6767); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ec008c, #fc6767); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}


.hero.splash{
  /*height: 80vh;*/
  padding-top: 10vh;
display: flex;
align-items: center;
padding-bottom: 10vh;

}
.hero.splash section{
  height: 100%;
}
.is-vertical-center, .is-vcentered {
  display: flex;
  align-items: center;
}
/*
img::after {
  content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
*/
.img-bottom-fade::after , .img-top-fade::after{
    display: block;
    height: 150px;
    width: 100%;
    content: '';
}
.img-bottom-fade::after {
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 100%);
  margin-top: -150px;
}
.img-bottom-fade.dark::after {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
}
.img-top-fade::after {
  position: absolute;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.5) 100%);
  top:0;
}
.img-top-fade.dark::after {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 100%);
}
.img-top-fade.light::after {
  background-image: linear-gradient(to top, rgba(255,255,255, 0) 0, rgba(255,255,255, 0.5) 100%);
}

.fullwidth-photo{
  height: 30vw;
  background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
}


.mobile-featured{
  background:#999 ; /* 002effdark blue */
}
.mobile-featured img{
  opacity:0.8;
}



@media screen and (min-width: 1216px) {
/* header image smaller on wide screen */
  .is-2by1-widescreen{
    padding-top: 50%!important;
  }
}
/*
component: icon-card
*/
.card {
  border: none;
  background: none;
  box-shadow: none;
}

.card .content{
  display: block;
  background: none;
  box-shadow: none;
   max-height:200px;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis; /* todo fix */

}
  .card.hasHover:hover{
  /*opacity:0.9  ;*/
}


/*
.card .card-content:after   {
  content: "";
  position: absolute;
  left:0;
  bottom: 0;
  height: 2rem;
  margin-bottom: -2px;
  width: 100%;
  background: linear-gradient(0deg, red, transparent);
  background-image: linear-gradient(bottom, red, transparent);

}*/


.card .card-content{
  padding: 0;
}
.card h2, .card h3{
  margin-top:0.7rem;
}

.icon-card{

}
.icon-card .img {
  width: 100%;
}

.icon-card p{
  font-size: 0.85rem;
}


.app-card{
  margin-top:40px;
}
.app-card .img.icon{
  width: 100%;
  height: auto;
  margin-left:10%;
  float: right;
}

.app-card .appstore .img{
  width: 30%;
  display: block;
  clear: both;
  margin-bottom: 80px;
}

.img.icon.is-roundcorners{
  border-radius: 23%;
}

.bt-appstore{

}


.storedesc{

}

.lineclamp3, .card .content.lineclamp3{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

.lineclamp4, .card .content.lineclamp4{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
/* see fadeout alt here: https://css-tricks.com/line-clampin/  */







/*
unreliable with AMP...
.storedesc.preview{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
*/

input.code, .code{
    font-family: monospace;
}


 .semitransparent{
   opacity: 0.2;
 }



.read_more_bt{
  opacity: 0.5;
  cursor: pointer;
}
.read_more_bt:hover{
  opacity: 1;
}

.clear{
  clear:both;
}