﻿ /*
#region !!====={ Version Information }=====!!
%~%@ < 2.0000 > @%~%				// File Version
%~%# < 03/13/2017 > #%~%			// File Mod Date
%~%! < _Core CSS > !%~%             // Core Module
%~%^ < 2.0000 > ^%~%				// Minimum Core Version
#endregion ==================================
*/

/* Blog */


.BlogListWrap{text-align:center; width:100%; max-width:1800px; margin:0 auto;}
.BlogList__item{width:18.5%;background:#eee;position:relative;margin:0 0.7% 20px;}
.BlogList__item a{text-decoration:none; color:#000;}
.BlogList__Visual{position:relative;}
.BlogList__Visual a{}
.BlogList__ImgThumb{}
.BlogList__ImgThumb img{width:100%; vertical-align:bottom;margin-bottom:-65px;}
.BlogList__VidThumb{}
.YoutubeThumb{width:100%;vertical-align:bottom;margin-bottom:-65px;display:block;}
.BlogList__VidPlayBtn{width:20%;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.BlogList__date{height:65px; width:65px; background:#000; float:left; margin:0; position:relative;text-align:center;}
.BlogEntryDate__month{font-weight:bold; font-size:17px;text-align:center;width:100%;float:left;margin-top:5px;color:red;}
.BlogEntryDate__day{font-weight:bold; font-size:29px;text-align:center;width:100%;float:left;margin-top:-7px;color:red;}
.BlogEntryDate__year{color:#FFF;float:left; width:100%; font-size:10px; letter-spacing:3px; margin-top:-5px; text-align:center;}
h3.BlogList__heading{margin:75px 0 10px 0;font-size:16px;padding:0 15px;line-height:1.4}
p.BlogList__body{font-size:13px;padding:0 20px}
.btnSet--blogList{}
.btn--blogList{background:red; border-radius:8px; width:150px; color:#FFF; font-weight:bold; font-size:14px;padding:7px 0; margin-bottom:15px;display:inline-block;}
.btn--blogList:hover, .btn--blogList:focus{background:#999;}
.BlogList__item a.btn--blogList{color:#FFF;}
.BlogList__item a.btn--blogList:hover{color:#000;}
img.blogEntryImg{width:auto;max-width:100%;}

@media only screen and (max-width: 1500px) {
    .BlogList__item{width:23.5%;}
}
@media only screen and (max-width: 1000px) {
    .BlogList__item{width:31.5%;}
}
@media only screen and (max-width: 700px) {
    .BlogList__item{width:48.5%;}
}
@media only screen and (max-width: 400px) {
    .BlogList__item{width:98%;}
}
@media only screen and (max-width: 800px) {

}
@media only screen and (max-width: 640px) {

}
@media only screen and (max-width: 600px) {

}