/****************** 
PROJECT: MANILA FAME - FAME+ Touchpoint Section
Agency: CITEM
Author: RD Cruz
Position: IT Officer I
*******************/

/******* START: CSS BY RDC *******/
.tp-nav-sq-group > div { width: 26%; height: 20vh; margin: 20px 30px; background-color: #cecece; position: relative; display: inline-block; }
div.tp-nav-square:before { content: ''; width: 100%; height: 100%; background-color: #000000; position: absolute; top:0; left: 0; z-index: 1; opacity: .25 }
.tp-nav-square { height: 100%; background-size: cover; background-position: center center; padding: 20px; }
.tp-nav-sq-group  > div:nth-child(1) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav03.jpg); }
.tp-nav-sq-group  > div:nth-child(2) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav02.jpg); }
.tp-nav-sq-group  > div:nth-child(3) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav01.jpg); }
.tp-nav-sq-group  > div:nth-child(4) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav04.jpg); }
.tp-nav-sq-group  > div:nth-child(5) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav05.jpg); }
.tp-nav-sq-group  > div:nth-child(6) > .category_btn > .tp-nav-square { background-image: url(../images/touchpoint_byRD/nav06.jpg); }
.tp-nav-sq-group span.spn-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #ffffff; font-size: 1.75em; line-height: 1em; font-weight: 600; z-index: 2; opacity: 1; text-align: center; }
.tp-nav-sq-group span.spn-dsc { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #ffffff; font-size: 1em; line-height: 1.15em; font-weight: 600; z-index: 2; opacity: 0; text-align: left; width: 90%; }
/*.tp-nav-square:hover:before, .tp-nav-square:focus:before { opacity: .5 }
.tp-nav-square:hover span.spn-name, .tp-nav-square:focus span.spn-name { opacity: 0 }
.tp-nav-square:hover span.spn-dsc, .tp-nav-square:focus span.spn-dsc { opacity: 1; }*/
.tp-brand-spotlight { height: 40vh; background-size: cover; background-position: center; background-image: url(../images/touchpoint_byRD/brand-spotlight.jpg); position: relative; }
.tp-brand-spotlight > div:first-child { background-color: rgba(0,0,0,.6); color: #ffffff; padding: 8px 12px; position: absolute; top:0; left: 0; font-weight: 600; }
.tp-brand-spotlight > div:nth-child(2) { background-color: #ffffff; color: #000000; padding: 15px; position: absolute; top: 2vh; right: 20px; height: 36vh; width: 27%; }
.tp-brand-spotlight b { text-transform: uppercase; font-size: 1.15em; }
.tp-brand-spotlight p.text-right { margin: 0; }
.tp-brand-spotlight p.text-right > a { text-decoration: underline; }
.tp-brand-spotlight > div:nth-child(2) > div {  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; max-width: 250px; }
.container.stories-newtag > h1 { text-transform:capitalize; }
ul.art-group > li { list-style: none; }
ul.art-group > li.more { text-align: right; text-decoration: underline; }
.art-holder { width: 26%; margin: 2% 3%; text-align: left; display: inline-flex; }
.art-holder > div { width: 100% }
.art-holder > div > span { font-size: .9em; display: block; }
.art-holder > div > h3 { font-size: 1.15em; color: #000000; margin: 0; padding-top: 0; }
.art-holder > div > h3 > a { color: #000000; }
.art-holder > div > h3+span { font-size: .8em; color: #4f4f4f; margin: 0; }
.art-holder > div > h3+p+span { font-size: .8em; color: #4f4f4f; margin: 0; }
.art-holder > div > a > img { width: 100%; height: 25vh; object-fit: cover; }
/*ul.art-group > li.art-holder:nth-child(5n+2) { width: 58% }*/
.pdng-2vh { padding-top: 2vh; padding-bottom: 2vh; }
p.three-lines { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ -webkit-box-orient: vertical; }
.story-content > h1 { margin-bottom: 0!important }
.story-content a {
   text-decoration: underline!important;
}
.story-content * {
   font-family: 'Abhaya Libre', serif !important;
}
.story-content > h5 { font-weight: 400; font-family: 'Abhaya Libre', serif; margin: 0; color: #a3a3a3; }
.article .story-content > *, .article .story-content p, .article .story-content em, .article .story-content p strong, .article .story-content a span { font-family: 'Abhaya Libre', serif !important; } 
.article .story-content  p { font-size: 1.1em } 
.story-content p img { max-height: 100vh!important; height: auto!important }
.story-content img + br + em, .story-content .byline { font-size: 14px; font-family: 'Abhaya Libre', serif !important; line-height: 24px; display: block;}
.story-content div.video-frame { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.shortened-intro { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; /* number of lines to show */ -webkit-box-orient: vertical; }
.story-content p + p > img, .story-content p > br + img { margin-top: 20px; }
.story-content h5 + p { margin-top: 20px; }
.article .story-content ul { padding-left: 15px }
.article .story-content ul > li { list-style: outside; padding-left: 5px; font-family: 'Abhaya Libre', serif !important; } 
.article .story-content ul > li > b, .article .story-content ul > li > strong { font-family: 'Abhaya Libre', serif !important; }
.story-content .img-responsive { width: 100%; height: auto; object-fit: contain; }
.story-content li, .story-content p > a { font-family: 'Abhaya Libre', serif !important; }
.story-content ol > li {   list-style: decimal; }
/******* END: CSS BY RDC *******/

/*****************************************/
/******* START: MOBILE OPTIMIZATION *******/
/*****************************************/

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) { 
   
}

/* Extra small devices (421px and down) */
@media (min-width: 320px)  and (max-width: 480px){ 
   .nav-touchpoint.home-touchpoint { height: 35vh; }
   .tp-nav-sq-group > div { margin:0; width:100%; height:10vh; }
   .tp-nav-sq-group span.spn-name { font-size: 1.25em }
   .tp-brand-spotlight > div:nth-child(2) { position: inherit; top: 60vw; right: 0; height: inherit!important; width: 100%; }
   .tp-brand-spotlight { margin-bottom: 30vh }
   .split_log { position: inherit; }
   .split_log > div { width: 46%; margin: 0 1%; }
   .split_log .split_buyer { padding-right: 0 }
   .split_log .split_exhibitor { padding-left: 0 }
   .art-holder { width: 100%; margin: 20px 0 ; }
   .pdng-2vh { padding-top: 5vh }
   { Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.  }
}

/* Small devices (575px and down) */
@media (min-width: 481px) and (max-width: 575px){ 
   .nav-touchpoint.home-touchpoint { height: 45vh; }
   .tp-nav-sq-group > div { width: 40%; margin: 20px; }
   .tp-brand-spotlight { height: 90vw }
   .tp-brand-spotlight > div:nth-child(2) { top: 0; right: 0; height: 100%; width: 50%; }
   .split_log { position: inherit; }
   .split_log .split_buyer { padding-right: 5%}
   .split_log .split_exhibitor { padding-left: 5% }
   .art-holder { width: 45%; margin: 13px; }
}

/* Small devices (767px and down) */
@media (min-width: 576px) and (max-width: 767px){ 
   .tp-nav-sq-group > div { margin: 20px; }
   .tp-brand-spotlight { height: 50vw }
   .tp-brand-spotlight > div:nth-child(2) { width: 42%; height: 100%; top:0; }
   .split_log > div { margin-top: 10vh; }
   .art-holder { margin: 20px 25px; }
}

/* Small devices (991px and down) */
@media (min-width: 768px) and (max-width: 991px){ 
   .nav-touchpoint.home-touchpoint .touchpoint-links { bottom: -7vw }
   .tp-brand-spotlight { height: 50vw }
   .tp-brand-spotlight > div:nth-child(2) { width: 37%; height: 70%; top:15%; }
}

/* Small devices (1199px and down) */
@media (min-width: 992) and (max-width: 1199px){ 
   .nav-touchpoint.home-touchpoint .touchpoint-links { bottom: -45px }
}

/*****************************************/
/******* END: MOBILE OPTIMIZATION *******/
/*****************************************/