/* ===================================================================== */
/* ================================= Common Sense Styles ============================= */
/* ===================================================================== */

section.cs {
  margin: 25px 0;
}
section.cs .issuuembed {
  height: 100%;
}
section.cs .row.cs-main .col-lg-4 > div:nth-child(1) {
  padding: 0 0 40px 0;
}
section.cs .row.cs-main .col-lg-4 img {
  display: block;
  width: 100%;
  max-height: 100%;
}
.cs-col-1, .cs-col-2 {
    font-size: .9em;
}

.cs-col-1 .panel {
  display: table;
  height: 100%;
  border: 1px solid #D0D0D0;
  padding: 15px 10px;
  box-shadow: 3px 5px 5px #D0D0D0;
}
.cs-col-1 h1 {
  color:#EC1C2D;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.2em;
  border-top: 1px solid #D0D0D0;
  border-bottom: 1px solid #D0D0D0;
  margin: 25px 0;
  padding: 15px 0;
}
.cs-col-1 h2, .cs-col-2 h2 {
  color: #244E69;
  font-size: 1.3em;
  font-weight: 600;
}
.cs-col-1 h2 a, .cs-col-2 h2 a {
  color: #244E69;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4em;
}
.cs-col-1 h2 a:hover, .cs-col-2 h2 a:hover {
  color: #EC1C2D;
  text-decoration: none;
}
.cs-col-1 h3 {
  color: #999;
  font-size: .9em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 10px 0;
  padding: 0;
  line-height: 0;
}
.cs-main h3 {
  font-size: 1.3em;
  margin: 0 0 15px 0;;
  padding: 0;
  color: #EC1C2D;
}
span.author {
  font-style: italic;
}
.cs-col-1 .readmore a, .cs-col-2 .readmore a {
  color: #999;
  font-size: 2.5em;
  float: right;
}
.cs-col-1 .readmore a:hover, .cs-col-2 .readmore a:hover {
  opacity: .5;
}
.cs-issues, .cs-articles, .cs-podcast {
  margin: 25px 0 0 0;
}
.cs-menu {
  background: #D0D0D0;
  padding: 15px;
}
.cs-articles div > img, .cs-podcast div > img {
  display: block;
  border: 1px solid #999;
  max-width: 100%;
}
.cs-issues h2 {
  font-size: 1.2em;
  display: inline-block;
  margin: 0 15px 0 0;
}
.cs-issues h2 {
  font-size: 1.2em;
  display: inline-block;
  margin: 0 15px 0 0;
}
.cs-articles h2, .cs-podcast h2 {
  color: #EB1C2D;
}
.cs-articles ul {}
.cs-articles li a, .cs-podcast li a {
  color: #000;
  text-decoration: underline;
}
.cs-articles li a:hover, .cs-podcast li a:hover {
  color: #EB1C2D;
    text-decoration: none;
}
.cs-title {
  margin: 20px 0 0 0;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1em;
  color: #EC1C2D;
}
h1.cs-article-title {
  margin: 0;
}
.cs-feed-list .cs-title {
  color: #50585A;
  opacity: .5;
  font-size: 1em;
}
h3.cs-article-title {
  margin: 5px 0;
}
.cs-article-info {
  font-size: .9em;
  color: #999;
  display: block;
  border-top: 1px solid #D0D0D0;
  border-bottom: 1px solid #D0D0D0;
  margin: 15px 0;
  padding: 15px 0;
}
.cs-yellowbox {
  background: #F5F5E0;
  margin: 50px 0 0 0;
  padding: 10px 25px;
  display: table;
  font-size: .9em;
}
.cs-greybox {
  background: #D0D0D0;
  margin: 50px 0 0 0;
  padding: 10px 25px;
  display: table;
  font-size: .9em;
}
.view-all {
  display: inline-block;
  float: right;
  margin: -65px 0 0 0;
}
/* ========================= MEDIA QUERIES ============================ */
/* desktop ----------- */
@media only screen and (max-width: 1200px) {

}
/* tablet (landscape) ----------- */
@media only screen and (max-width: 1170px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}
/* tablet (portrait) ----------- */
@media only screen and (max-width: 768px), only screen and (max-width: 768px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    section.cs .issuuembed {
        height: 340px;
        margin: 25px 0;
    }
    section.cs .row.cs-main .col-lg-4 > div:nth-child(1) {
        padding: 0;
    }
      section.cs .row.cs-main .col-lg-4 img {
        display: inline-block;
        width: 50%;
        float: left;
        padding: 15px;
    }

}
/* mobile phone (landscape) ----------- */
@media only screen and (max-width: 667px), only screen and (max-width: 667px), only screen and (max-width: 667px), only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .cs-col .col-lg-6 {
      margin: 0 0 25px 0;
    } 
}
/* mobile phone (portrait)----------- */
@media only screen and (max-width: 375px), only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}