/*BLOGS*/

#bread {font-size: 14px; line-height: 1.4; margin: -10px 0 10px 0;}
.breadpad {padding-top: 30px;}

/*Main Blog Pages*/

.blogtop {text-align: center; margin: auto; width: 90%;}

/*menu*/
.modmenu {display: table; text-align: center; margin: 20px auto 25px auto;}
.modmenu a {display: inline-block; vertical-align: middle; margin: 2.5px 0; padding: 6px 0; text-align: center; width: 115px; background-color: #BA1000; color: #FFF; border-radius: 8px; font-size: 16px; line-height: 1.3; text-decoration: none; transition: 0.15s;}
.modmenu div {display: table-cell; vertical-align: middle; height: 45px; width: 1%;}
.modmenu a span {display: block;}
.modmenu a:hover:not(.selected) {background-color: #EA1500;}
.modmenu a.selected {background-color: #999; cursor: text;}

@media (max-width: 880px) {.modmenu {max-width: 420px;}}

/*cards*/
#cards {grid-template-columns: repeat(auto-fill, 350px); grid-auto-rows: auto; grid-gap: 50px 25px; margin: 40px auto 80px auto; width: 97%; justify-content: center;}
#cards img {width: 100%; display: block; border-radius: 4px 4px 0 0; transition: .2s; width: 700px; height: 400px; width: 100%; height: auto;}
#cards article {position: relative; display: inline-block; border-radius: 4px; box-sizing: border-box; background-color: #EEE; border: 1px solid #DDD; transition: .2s;}
#cards a {color: #333; display: inline-block; text-decoration: none; height: 100%;}

.cardtext {padding: 25px 30px 50px 30px;}
#cards article:hover {background-color: #FEE9A8;} #cards a:hover img {-webkit-filter: brightness(105%) saturate(110%);}
.cardtext h1 {font-size: 22px; line-height: 1.35; font-weight: 500; color: #E82C2D;}
.cardtext div:nth-child(2) {text-align: left; margin-top: 20px; font-size: 16px; line-height: 1.6;}
.cardtext div:last-child {position: absolute; bottom: 10px; right: 17px; font-size: 15px; color: #008299;}

@media (max-width: 1190px) {
#cards {grid-template-columns: repeat(auto-fill, 280px); grid-gap: 30px 20px;}
.cardtext {padding: 25px 25px 45px 25px;} .cardtext div:nth-child(1) {font-size: 21px;}
}
@media (max-width: 980px) {
#cards {grid-template-columns: repeat(auto-fill, 240px); grid-gap: 20px 15px;}
.cardtext {padding: 20px 20px 50px 20px;} .cardtext div:nth-child(3) {bottom: 10px; right: 16px; font-size: 14px;}
}
@media (max-width: 830px) {#cards {grid-template-columns: repeat(auto-fill, 300px); grid-gap: 30px 20px; margin-top: 30px;}}
@media (max-width: 700px) {#cards {grid-template-columns: repeat(auto-fill, 240px); grid-gap: 25px 15px;}}
@media (min-width: 581px) {#cards {display: grid;}}
@media (max-width: 580px) {

#cards {display: table; width: 88%;} #cards article {margin-bottom: 10px; width: 100%; transition: .1s; background-color: #FEE9A8; border: none;}
#cards a {margin: 0; width: 100%;} .cardtext {padding: 15px;}
.cardtext div:nth-child(2) {visibility: hidden; font-size: 0; line-height: 0; margin: 0; padding: 0;}
.cardtext div:nth-child(3), #cards img {display: none;}
#cards article:hover {background-color: #FFDB60;}
}

/*-----------------------------------*/

/*Individual Blogs*/

.bhblog {padding-top: 25px;}
.blogpic {text-align: center; margin: 10px auto 35px auto;}
.blogpic img {display: block; margin: auto; width: 700px; height: 400px; width: 100%; height: auto; max-width: 700px;}

/*#blogcontent {overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}*/

@media (max-width: 500px) {.bodyarea ul, .bodyarea ol {margin-left: -17px;}}

/*@media (max-width: 602px) {
#blogcontent ol li, #blogcontent ul li {margin-left: -12px;} #blogcontent ol ul li, #blogcontent ul ul li {margin-left: -22px;}}
@media (max-width: 475px) {
#blogcontent ol li, #blogcontent ul li {margin-left: -25px;} #blogcontent ol ul li, #blogcontent ul ul li {margin-left: -48px;}}*/

/*blog index on bottom of each blog page*/
#bisection {font-size: 20px; background-color: #E0E0E0;}
#blogindex {display: table; margin: auto;} #blogindexhead {text-align: center; font-weight: 600; font-size: 1.2em; margin-bottom: 30px;}
#blogindex h4 {font-weight: 500; font-size: 1em; line-height: 1.4;}
#blogindex ul {margin-left: -17px;} #blogindex li {font-size: .8em; line-height: 1.45;}
#blogindex a {text-decoration: none;} #blogindex a:hover {text-decoration: underline;}

@media (max-width: 480px) {.bhblog {padding-bottom: 20px;}}
@media (min-width: 381px) {
#bisection {padding: 40px 5% 30px 5%;} .bil, .bir {display: table-cell; vertical-align: top; width: 50%;}
.bil {padding-right: 15px;} .bir {padding-left: 15px;} #blogindex li {padding-bottom: 13px;}
}
@media (max-width: 380px) {#bisection {padding: 35px 5% 20px 5%;} #blogindex li {padding-bottom: 15px;} .bil, .bir {display: block;}}

/*copyscape*/

#copyscape {margin: 60px auto 0 auto; text-align: center; font-size: 13px; line-height: 1.4;}
#copyscape img {margin: 10px auto; text-align: center; width: 130px; height: 46px; display: block;}
#copyscape div {font-size: 12px;}