/*  page specifc width */
@media (min-width: 1200px) {
  .container-main {
    width: 70%;
  }
}
/* typography ----------------------------------------------------------------*/

/* youtube link */
.yt-link {
  color:#e23a43;
}
.yt-link a{
  text-decoration: none;
}
.yt-link a:hover,
.yt-link a:active,
.yt-link a:focus{
  color:#e23a43;
  text-decoration: underline;
}
.yt-link i {
  float: left;
  margin-right: 15px;
}
.yt-link p
.page-title {
  margin-bottom: 0;
  display: inline-block;
}
.yt-link div {
  height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fa-youtube-square {
  margin-bottom: -10px;
  font-size: 42px;
}


/* groups headers */
.groups-header {
  margin-left: 60px;
  margin-right: 60px;
}

#education-header,
#evidence-header,
#bioinformatics-header,
#national-header,
#pharmacogenomics-header,
#policy-header {
  border-radius: 4px;
  background-color: #9CB7D2;
  padding: 20px 15px;
  margin-bottom: 30px;
}
#education-header img,
#evidence-header img,
#bioinformatics-header img,
#national-header img,
#pharmacogenomics-header img,
#policy-header img {
  margin-left: 40px;
}
#education-header .image-balance,
#evidence-header .image-balance,
#bioinformatics-header .image-balance,
#national-header .image-balance,
#pharmacogenomics-header .image-balance,
#policy-header .image-balance {
  display:  inline-block;
  height: 100%;
  vertical-align: middle;
}
#education-header .image-balance h1,
#evidence-header .image-balance h1,
#bioinformatics-header .image-balance h1,
#national-header .image-balance h1,
#policy-header .image-balance h1 {
  margin-left: 140px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#pharmacogenomics-header .image-balance h1{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 100px;
}
#national-header .image-balance h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 120px;
}
#education-header{
  background-color: #BCCFE0;
  background-image: url("/assets/site/images/icon-education-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 80px;
}
#evidence-header{
  background-color: #F6C4C7;
  background-image: url("/assets/site/images/icon-evidence-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 80px;
}
#bioinformatics-header{
  background-color: #BDD4C0;
  background-image: url("/assets/site/images/icon-bioinformatics-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 80px;
}
#national-header{
  background-color: #CCCCCC;
  background-image: url("/assets/site/images/icon-national-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 60px;
}
#pharmacogenomics-header{
  background-color: #FAC786;
  background-image: url("/assets/site/images/icon-pharma-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 40px;
}
#policy-header{
  background-color: #B7C9D7;
  background-image: url("/assets/site/images/icon-policy-white.png");
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 80px;
}
#education-header img{
  width: 75px;
}
#pgx-header img{
  width: 45px;
}
@media (max-width: 767px){
  .groups-header{
    margin-left:15px;
    margin-right: 15px;
  }
  #education-header .image-balance h1{
    margin-left: 65%;
    font-size: 32px;
  }
  #evidence-header .image-balance h1{
    margin-left: 35%;
    font-size: 32px;
  }
  #bioinformatics-header .image-balance h1 {
    margin-left: 35%;
    font-size: 32px;
  }
  #national-header .image-balance h1{
    margin-left: 30%;
    font-size: 24px;
  }
  #policy-header .image-balance h1  {
    margin-left: 95%;
    font-size: 32px;
  }
  #pharmacogenomics-header .image-balance h1{
    margin-left: 30%;
    font-size: 24px;
  }
}
@media (max-width: 530px) {
  #bioinformatics-header .image-balance h1 {
    margin-left: 40%;
    font-size: 24px;
  }
  #evidence-header .image-balance h1{
    margin-left: 60%;
  }
  #pharmacogenomics-header .image-balance h1 {
    margin-left: 25%;
    font-size: 23px;
  }
}

.side-box {
  border: solid 1px #ddd;
  padding: 30px;
  float: right;
  width: 40%;
  margin-left: 10px;
}
.side-box .title {
  margin-top: 0 !important;
}
.bottom-box {
  padding: 20px;
  background-color: #e2e7eb;
  border-radius: 5px;
  margin-top:30px;
}
.bottom-box .title {
  margin-top: 0;
}
.main-content .title {
  margin-top:30px;
}
.bottom-box a {
  background: #fff;
  margin: 0 10px;
}
@media (max-width: 767px) {
  .education-header h1 {
    font-size: 24px;
  }
  .side-box {
    width: 100%;
    margin: 10px 0;
    float: none;
  }
}