/*

header bars


*/

/* to do . merge with ilu-head styles.  */


.invitecard.pinned{
  border:#0812d0 3px solid; /* blue */
  background: #fbfbff;
}

.box.invitecard{
  box-shadow: none;
}
.box.invitecard:not(.about):hover{
  border-color:#0812d0  ; /* blue */
  background: #fff;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #0812d0;
}


.hero.absbar{
width:100%;
background:#f6e148;
padding-top:0;
padding-bottom: 0;
align-items: left;
}
.absbar .container{
   width: 100%!important;
}
.hero.absbar.yel{
  background:#f6e148;
}

.hero.absbar.rose{
  background:#eebed3;
}

.hero.absbar.pink{
  background:#e0719e;
}

.hero.absbar.teal{
  background:#7fd6c2;
}

.hero.absbar.blue{
  background:#aac6fc;
}


.absbar img{
  max-height:30vh ;
  margin-top: 1vh;
  object-fit: contain;
  display: inline-block;
}

.absbar.with-content img{
  /* people and programs */
}
@media (max-width: 700px){
  .absbar img{
    margin-top: 13vh;
  }
}




 /* regular hhh asvbar*/
.hero.absbar{
width:100%;
background:#f6e148;
padding-top:0;
padding-bottom: 0;
align-items: left;
}
.absbar .container{
   width: 100%!important;
}
.hero.absbar.yel{
  background:#f6e148;
}

.hero.absbar.rose{
  background:#eebed3;
}

.hero.absbar.pink{
  background:#e0719e;
}

.hero.absbar.teal{
  background:#7fd6c2;
}

.hero.absbar.blue{
  background:#aac6fc;
}


.absbar img{
  max-height:30vh ;
  margin-top: 1vh;
  object-fit: contain;
  display: inline-block;
}
@media (max-width: 700px){
  .absbar img{
    margin-top: 13vh;
  }
}




/* promo code!! */

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

.product_icon{
  max-width:30%;
  object-fit: scale-down; /*unused*/
    max-height: 53px;
}

.muted{
  opacity:0.5;
}



.content.md a{
  text-decoration: underline;
  color:#0070ff;
}

.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;
}
.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  */
.fa-star, .fa-star-half{
  color:#ff7e00;
}


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



.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;
}

.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;
}

.box.strong-shadow{

}

.no-shadow-over:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.shadow-1 {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.shadow-2 {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.shadow-3 {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.11);
}

.shadow-4 {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.shadow-5 {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}


.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:    #f1f3f5; /* grey cool*/

   /*linear-gradient(rgba(255,255,255,1), rgba(210,210,210,1))*/

   /*   linear-gradient(rgba(255,255,255,1), rgba(0,0,0,0.1)) ,
                url('/img/noise.svg') 0px 0px/ 250px 250px repeat;*/
}

@media (min-width: 900px){ /*aprox */
   section.pat, section.main-content.pat, .pat{
      background-image: url('/img/bg/1.png');
      background-repeat: repeat;
      background-size: 250px;
  }
}

.hero.is-purple {
    background: linear-gradient(159deg, #532ac1 13%, #d54ee6 69%, #fab7a8 100%) #532ac1 ;

    color: white!important;
}

.hero.is-teal {
  background:#3de3fe;


    color: white!important;
}
.hero.is-lime {

  /* in order: green: blue, teal */

  background: linear-gradient(#59ff3c, rgba(255,255,255,0)), linear-gradient(to top left, #43a6ff, rgba(255,255,255,0)), linear-gradient(to top right, #2affa4, rgba(255,255,255,0));

  background: linear-gradient(139deg, #74ff2f, #00ffa1, #16c0f3, #1e34d2);

/* background-blend-mode: screen;
  background: linear-gradient(#0eff3c, transparent), linear-gradient(to top left, #0587fd, transparent), linear-gradient(to top right, #0dfd96, transparent);
*/


/*
background: linear-gradient(#00ff2b, transparent), linear-gradient(to top left, #0400ff, transparent), linear-gradient(to top right, #00ff2f, transparent);


 background-blend-mode: screen;

    background: linear-gradient(to left, #02fdad, #b6f55c);*/
    color:black;
}


.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, #fff 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, #fff 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%);
}

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




/*
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: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;
}