/*
  Page URI:     heartmath.org/research/featured-research
  Description:  Custom page styling
  Version:      1.0
*/

/*
 * CSS DIRECTORY
 - GLOBAL           - button, icon, tier
 - MEDIA QUERIES    - @media
*/



/* GLOBAL
================================= */
#content div.hm-tier.sec-02 > .row {
  background:#eef2fe url(/assets/uploads/2014/10/globe-hands.jpg) no-repeat 90% 100px; 
}

#content div.hm-tier.sec-03 > .row {
  background:#d8f3d6 url(/assets/uploads/2014/11/forest.jpg) no-repeat -180px bottom; 
}

#content div.hm-tier.sec-04 div.item {
  position:relative; 
  display:table; 
  height:200px; 
  margin-bottom:20px;
  vertical-align:middle;
}

#content div.hm-tier.sec-04 div.item:last-child {
  margin-bottom:0;
}

#content div.hm-tier.sec-04 div.item div.img {
  display:table-cell; 
  width:306px; 
  vertical-align:middle; 
}

#content div.hm-tier.sec-04 div.item div.img img {
  width:306px; 
  height:200px; 
  background:#ccc;
}

#content div.hm-tier.sec-04 div.item div.info {
  display:table-cell; 
  vertical-align:middle; 
  padding-left:30px;
}

#content div.hm-tier.sec-05 .hm-form select {
  text-indent:3%;
}


/* MEDIA QUERIES
================================= */
@media (min-width: 1500px) {
  #content div.hm-tier.sec-02 > div.row {
    background-position:82% 100px;
  }
}

@media (min-width: 1300px) and (max-width: 1499px) {
  #content div.hm-tier.sec-02 > div.row {
    background-position:88% 100px;
  }
}

@media (max-width: 1300px) {
  #content div.hm-tier.sec-03 > .row {
    background:#d8f3d6; 
  }
}

@media (min-width: 768px) and (max-width: 1299px) {
  #content div.hm-tier.sec-02 > div.row {
    background-position:95% 100px;
  }
}

@media (max-width: 767px) {
  #content div.hm-tier.sec-02 > div.row {
    background:#eef2fe;
  }

  #content div.hm-tier.sec-04 div.item,
  #content div.hm-tier.sec-04 div.item div.info, 
  #content div.hm-tier.sec-04 div.item div.img, 
  #content div.hm-tier.sec-04 div.item div.img img {
    display:block; 
    clear:both;
    text-align:center;
  }
  
  #content div.hm-tier.sec-04 div.item {
    width:306px;
    height:auto; 
    margin:0 auto 30px auto;
    text-align:center;
  }
  
  #content div.hm-tier.sec-04 div.item div.info {
    padding:0;
  }
  
  #content div.hm-tier.sec-04 div.item div.img {
    height:200px;
    margin-bottom:12px;
  }
}

@media (max-width: 480px) {
  #content div.hm-tier.sec-04 div.item, 
  #content div.hm-tier.sec-04 div.item div.info, 
  #content div.hm-tier.sec-04 div.item div.img, 
  #content div.hm-tier.sec-04 div.item div.img img.img-default {
    width:auto;
    height:auto;
    margin-left:auto;
    margin-right:auto;
  }
}