/* 
  Global CSS for Pro - Scarlets
  Can be used on any page or post or global block / header / footer
*/

/* Scarlets Standard Button Style */
.sbtn {
  display: inline-block !important;
  text-align: center !important;
  -webkit-appearance:none !important; 
  -webkit-transform: skew(-10deg, 0deg) !important;
  -moz-transform:skew(-10deg, 0deg) !important;
  -o-transform:skew(-10deg, 0deg) !important;
  -ms-transform:skew(-10deg, 0deg) !important;
  transform: skew(-10deg, 0deg) !important;
	border: 0px !important;
}

/* Scarlets Standard Button - Colors */
.sbtn-lightred { background: #CC0704 !important; }
.sbtn-darkred { background: #920202 !important; }
.sbtn:hover { background: #1E1E1E !important; color: #ffffff !important; }

/* Scarlets Standard Button - Sizes */
.sbtn-sm { width: 50px !important; height: 30px !important; font-size: 14px !important; }
.sbtn-md { width: 150px !important; height: 50px !important; font-size: 17px !important; }

/* Scarlets Standard Button - Text */
.sbtn-text {
  -webkit-transform: skew(10deg, 0deg) !important;
  -moz-transform:skew(10deg, 0deg) !important;
  -o-transform:skew(10deg, 0deg) !important;
  -ms-transform:skew(10deg, 0deg) !important;
  transform: skew(10deg, 0deg) !important;
  text-decoration: none !important;
  font-weight: normal !important;
  font-family: 'Tw Cen MT' !important;
  text-transform: uppercase;
  color: #ffffff;
}

/* Scarlets - Typography */
/* Import Big Noodle Titling Font from online web fonts for use in headlines */
@font-face {font-family: "BigNoodleTitling"; src: url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.eot"); src: url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.woff") format("woff"), url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ff78c5e2b6c3846035dae28cdaa65583.svg#BigNoodleTitling") format("svg"); }

@font-face { font-family: "Tw Cen MT"; src: url("//fonts.cdnfonts.com/css/tw-cen-mt") } 
.titlefont { font-family: 'BigNoodleTitling'; }
.bodyfont { font-family: 'Tw Cen MT', sans-serif; }

/* White Links and White Text */
.whitetext { color: #ffffff !important; }
.whitelinks { color: #ffffff !important; text-decoration: none; }
a { text-decoration: none !important; } /* Remove Underline */

/* OLD FONT FACE HOSTED
@font-face { font-family: 'BigNoodle'; src: url('http://178.62.47.158/wp-content/fonts/big_noodle_titling.ttf') format('truetype'); }
@font-face { font-family: 'BodyFont'; src: url('http://178.62.47.158/wp-content/fonts/body_font.ttf') format('truetype'); }
*/

/* 
  Vindico Grid Posts
  Used on Home Page
*/
.gridposts { display: flex; justify-content: center; flex-wrap: wrap; }
.gridpostitem { cursor:pointer !important; position: relative; background: grey;}
.gridpostitem:hover { opacity: 1;}
/* Vindico Grid - Filters for Client Side Grid */ 
.searchfilter { text-align: center; flex: 1 100%; }

/* Vindico Grid - Transition Effects for Client Side Grid */
.fade-list-move { transition: transform 0.25s ease; }
.fade-list-leave-to { transition: all 0.5s ease; opacity: 0; }

/* Vindico Grid - Post Item Overlays */

/* Article Post Item Overlays */
.articletitle { background: #1B1B1B; color: #ffffff; font-size: 16px; height: 60px; width: 100%; line-height: 24px; position: absolute; display: block; bottom: 0px; }
.articlecategory { background: #1B1B1B; color: #ffffff; font-size: 14px; cursor: pointer; left: 0px; position: absolute; display:inline-block; text-transform: uppercase; }
.articledate { background: rgba(204, 0, 0, 0.7)  !important; padding: 3px; margin: 0px; width: 60px; right: 0px; position: absolute; display:inline-block }
.articlemonth { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; }
.articleday { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; font-size: 40px; line-height: 30px; }
.articleyear { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; font-size: 14px; }
.articletitle a { color: #ffffff; }
.articletitle:hover { background-color: #920402 !important; }

/* Article Overlays - Text Padding */
.titlepadding { padding: 5px 10px 5px 10px !important; }
  @media (max-width: 1024px) { /* IPad Specific CSS */
    .titlepadding { padding: 1px 5px 1px 5x !important; }
  }

.categorypadding { padding: 5px !important; cursor:pointer !important; }


/* video Grid */
.videogrid { display: flex;flex-wrap: wrap;gap:50px;margin-top: 30px;margin-bottom: 50px;}
.videoiframe { z-index: 99999; width: 100%; height: 100%; border: 0px; position: absolute; top: 50px; }
.videopost { width: 24%; height: 275px; background-size: 120% !important; background-repeat: no-repeat !important; background-position: center !important; }
  
  .videopost { width: 50%;height: 360px; background-size: 110% !important; background-repeat: no-repeat !important; background-position: center !important;border: 3px solid #e75280;}  
  /*背景圓圈*/
  .video-bg-circle{
    position: absolute;
    top: 70px;
    left: -120px;
    z-index: -99;
  }
  /*文案標題*/
.txt-wrap .title {
  padding: 0 0 20px;
  line-height: 120%;
  font-size: 36px;
  color: #1f1010;
  font-weight: 600;
}
.txt-wrap .copywriting-content{
  line-height: 1.8;
}
.txt-wrap p {
  font-size: 20px;
  color: #676565;
}
.fn-size16{
  font-size: 28px;
  font-weight: 800;
}
/* video Grid Item Overlay */
.videotitle { background: #1B1B1B; color: #ffffff; font-size: 16px; height: 60px; width: 100%; line-height: 24px; position: absolute; display: block; bottom: 0px; }
  
.videodate { background: rgba(204, 0, 0, 0.7)  !important; padding: 3px; margin: 0px; width: 50px; right: 0px; position: absolute; display:inline-block; }
.videomonth { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; font-size: 15px; }
.videoday { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; font-size: 40px; line-height: 30px; }
.videoyear { color: #ffffff; padding: 1px !important; margin: 0px !important; text-align: center; text-transform: uppercase; font-size: 14px; }
.videotitle a { color: #ffffff; }
.videotitle:hover { background-color: #920402 !important; }
  @media (max-width: 1024px) { /* IPad Specific CSS */
    .videodate { width: 40px !important; } 
    .videomonth { font-size: 12px !important; }
    .videoday { font-size: 25px !important; line-height: 25px;  }
    .videoyear { font-size: 12px !important; }    
  }
  @media (max-width: 600px) { /* Smartphone Specific CSS */
    .videodate { width: 50px !important; }     
    .videomonth { font-size: 15px !important; }
    .videoday { font-size: 40px !important; line-height: 30px; }
    .videoyear { font-size: 14px !important; }
  }

/* video Play Icon Container */
.playicon { border: 0px; height: 80x; width: 80x; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; cursor: pointer ; }
.playiconimg { height: 80px; width: 80px; }
  @media (max-width: 1024px) { /* IPad Specific CSS */
    .playicon { height: 50x !important; width: 50x !important; position: absolute; left: 60%; margin-left: -50px; top: 60%; margin-top: -50px; cursor: pointer; }
    .playiconimg { height: 50px !important; width: 50px !important; }
  }
  @media (max-width: 600px) { /* Smartphone Specific CSS */
    .playicon { height: 80px !important; width: 80x !important; left: 50% !important; margin-left: -50px !important; top: 50% !important; margin-top: -50px !important; cursor: pointer ; }
    .playiconimg { height: 80px !important; width: 80px !important; }
  }
    
/* video Play Icon Hover */
.swap-on-hover { position: relative; margin: 0 auto; }
.swap-on-hover img { position: absolute; top: 0; left: 0; overflow: hidden; }
.swap-on-hover .swap-on-hover__front-image { z-index: 9999; transition: opacity .2s linear; cursor: pointer; }
.swap-on-hover:hover > .swap-on-hover__front-image{ opacity: 0; }

/* Scarlets Homepage Specific CSS */
.homefeaturedpostitem { width: 100%; height: 559px; }
.homenewspostitem { width: 100%; height: 275px; }
.postitem-even { margin-top: 9px; }

/* Scarlets Video Player Modal / Lightbox */
.modal {
  display: none;
  z-index: 99990;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: #000000;
}
.modal-content { display: none; z-index: 99991; margin: auto; padding: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #000000; width: 1000px; height: 600px;}
.modal-head { position: relative; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; background: #000000;}
.modal-logo { margin-left: 20px; }
.modal-logo-img { width: 150px;}
.modal-close { margin-right: 20px; }
.modal-foot { display: none !important; }
  @media (max-width: 1366px) { /* Ipad Pro Vertical / Laptop Specific CSS */
    .modal-content { width: 1024px; height: 576px;}
  }
  @media (max-width: 1024px) { /* Ipad Horizontal / Ipad Pro Vertical Specific CSS */
    .modal-content { width: 800px; height: 450px;}
  }
  @media (max-width: 600px) { /* Smartphone Specific CSS */
    .modal { position: fixed !important; z-index: 99990 !important; width: calc(100vw) !important; height: calc(100vh) !important; opacity: 1; background: #000000; overflow: hidden !important; -webkit-filter: initial; }
    .modal-head { justify-content: center !important; }   
    .modal-logo { margin-left: 0px !important; }   
    .modal-close { display: none; }
    .modal-foot { display: block !important; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #000000; }
  }

.closecontainer { text-align: center; }
@media (max-width: 767px) {
  .modal { display: none; z-index: 99999; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #000000; width: 400px; height: 225px;opacity: 0.8;}
}



/* Scarlets Video Player Modal Close Button */

.close { color: white; position: absolute; top: 0; right: 0; font-size: 35px; font-weight: bold; margin: 5px; }
.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }

/* Scarlets Mobile Specific CSS */
@media (max-width: 767px) {
  .videopost { width: 100%; height: 275px; margin-bottom: 15px; }
  .homefeaturedpostitem { height: 275px; }
	.postitem-even { margin-bottom: 15px; }
  .txt-wrap {
    max-width: 425px;
    padding: 50px 20px 0;
  }
  .txt-wrap .title {
    padding: 0 0 10px;
    font-size: 28px;
} 
.txt-wrap p {
  font-size: 16px;
  color: #676565;
}
.fn-size16{
  font-size: 24px;
  font-weight: 800;
} 
.videogrid{
  gap:0px;
  justify-content: center;
  padding: 10px;
}
.modal-foot {
  display: block !important;
  position: relative;
  top: -150%;
  left: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: none;
}
.modal-logo-img {
  width: 100% !important;
  height: 100% !important;
}
.modal-content { z-index: 99991 !important; width: 90%; height: 300px; background: #000000 !important; position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); }
.ytp-embed:not(.ad-showing) .ytp-title-text{
  padding-top: 0px !important;
}
.video-bg-circle{
  top: -20px;
}
}