/*Reset CSS*/

body {line-height: 1;font-family: 'Gotham Medium'; background: #fff;letter-spacing: 0.4px;font-size: 14px}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a{text-decoration: none; }
a:focus, input:focus, textarea:focus{outline:none;}
/*Reset CSS*/

/* Common CSS */
.articleflex{display:flex;justify-content:space-between;}
.article-box{margin-bottom:65px}
/* Common CSS */

/* List Images CSS */
#under30-container{background: #100624;width:100%}
.main-cont-wrap{width:980px;margin:0 auto;padding:20px 0}
.art-left a{display:block;}
.ttl-wrap{display:flex;flex-direction:column; position: relative;}
.not-rev.art-right .ttl-wrap {margin-left: auto;}
.tut-ttl{font:700 20px/20px 'Gotham Bold';color:#fff;text-align:center;display:block;margin-top:16px; border: 0; text-transform: initial; padding-bottom: 0;}
.tut-subtitle{font-style:normal;font:500 17px/20px 'Gotham Medium';display:block;padding-top:5px; text-align: center; color: #fff; margin-top: 0; margin-bottom: 0;}
.art-desc{text-align:right;display:flex;align-items:center;flex-direction:column;justify-content:center;}
.not-rev.art-right.art-desc {width: 30%;}
.f-ttl{font:500 15px/15px 'Gotham Medium';color:#fff;text-transform:uppercase;display:flex;text-align:right;position:relative;margin-bottom:12px;margin-left:auto;width:30%}
.f-ttl::after{height:2px;content:'';width:94px;background:#fff;position:absolute;bottom:-5px;right:0;}
.y-ttl{font:400 28px/50px 'Gotham Ultra';color:#ff9933;display:flex;margin-left:auto;align-items:flex-end;}
.y-ttl.pinkclr span{color:#ff0066}
.y-ttl span{font:400 60px/68px 'Gotham Ultra';color:#ff9933;}
.th-ttl{color:#fff;font:500 23px/29px 'Gotham Medium';margin-bottom:48px;width:84%;display:flex;margin-left:auto;position:relative;}
.not-rev.art-right .th-ttl {width: auto;}
.th-ttl::after{height:2px;content:'';width:94px;background:#fff;position:absolute;bottom:-25px;right:0;}
.art-list{display:flex;justify-content:space-between;}
.art-list li{margin-right:30px;margin-bottom:45px}
.art-list li a{display:block;color:#fff;text-align:center;}
.art-list li .ttl-name{display:block;margin-top:10px;padding-bottom:0;font:700 20px/24px 'Gotham Bold'; color: #fff; border: 0; text-transform: initial;}
.art-list li .comp-name{display:block;font:400 17px/25px 'Gotham Book'; color: #fff; margin-top: 5px; padding-bottom: 0; margin-bottom: 0;}
.rev-col{flex-direction:row-reverse;}
.rev-col .art-desc{text-align:left;}
.rev-col .f-ttl{text-align:left;margin-right:auto;margin-left:inherit;}
.rev-col .f-ttl::after{right:inherit;left:0}
.rev-col .y-ttl{text-align:left;margin-right:auto;margin-left:inherit;}
.rev-col .th-ttl{margin-left:inherit;margin-right:auto;text-align:left;}
.rev-col .th-ttl::after{right:inherit;left:0}

/* The Modal (background) */
/*.active{opacity:1}*/
.modal {display: none;position: fixed;z-index: 1;left:50%;top:50%;transform:translate(-50%, -50%);width:900px;height:90vh;overflow:auto;background-color: #fff;z-index: 99;}

/* Modal Content */
.modal-content {position: relative;background-color: #fefefe;margin: auto;padding: 0 45px;/*width: 90%;max-width: 1200px;*/}

/* The Close Button */
.mySlides {display: none;}

.cursor {cursor: pointer;}

/* Next & previous buttons */
.prev, .next {cursor:pointer;position:absolute;top:200px;width:auto;margin-top:-50px;color:#000;transition:0.6s ease;user-select:none;-webkit-user-select:none;background:#fc0d1b;width:30px;height:30px;border-radius:50%}

/* Position the "next button" to the right */
.prev svg{margin-left:4px;margin-top:2px}
.next svg{margin-left:4px;margin-top:2px;transform:rotate(180deg);}
.next {right:45px;}
.prev span, .next span{font:500 13px/14px 'Gotham Medium';color:#000;text-align:center;display:flex;justify-content:center;margin-top:8px}

/* On hover, add a black background color with a little bit see-through */
/*.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8);}*/
#overlayDiv{position:fixed;width:100%;height:100%;background:#000;opacity:0.8;left:0;top:0;bottom:0;right:0;display:none;z-index:9}
.no-scroll{overflow:hidden;}
.lightbox-cont{max-width:650px;margin:0 auto;}
.lightbox-cont img{width:100%;max-width:650px;display:block;margin:0 auto;}
.lgt-sptname{font:700 17px/22px 'Gotham Bold';color:#999;padding-bottom:5px}
.lgt-name{font:800 30px/34px 'Gotham Black';color:#000; display: inline; line-height: 44px; border-bottom-width: 3px; text-transform: initial;}
.lgt-age {color: #999;font: 400 15px/30px 'Gotham Book';text-transform: uppercase;}
.lgt-desg{color:#999;font:400 16px/30px 'Gotham Book';text-transform:uppercase;margin-bottom:15px;margin-top:10px; line-height: normal;}
.close svg{display:flex;margin-left:auto;margin-top:15px;margin-right:15px}
.close:hover svg{fill:#b7b1b1;}
.lt-desc{font:500 16px/22px 'Gotham Medium';color:#000;margin-top:10px;margin-bottom:40px}
.vdo-link{background: rgb(210,240,50);background: linear-gradient(90deg, rgba(210,240,50,1) 0%, rgba(232,234,51,1) 35%, rgba(237,234,51,1) 100%);display:inline-block;text-transform:uppercase;padding:5px 10px;font:500 13px/20px 'Gotham Medium';margin-bottom:15px}
.vdo-link a{color:#000}
.btm-text{border-top:3px solid #000;color:#666;font:400 14px/20px 'Gotham Book';padding:15px 0;}
.ms-close svg {
display: flex;
margin-left: auto;
margin-top: 15px;
margin-right: 15px;
}

@media screen and (min-width:1024px) and (max-width:1250px){
	/*.main-cont-wrap{width:80%}*/
}

@media (max-width:1023px){
	.main-cont-wrap{width:100%}
	.ttl-wrap{flex-direction:row;justify-content:center;margin-left:auto;margin-right:auto;width:80%}
	.art-img img{width:92%;margin:0 auto;display:block;}
	.art-list li img{width:154px}
	.article-box{flex-direction:column;flex-wrap:wrap;margin-bottom:40px}
	.art-list{flex-wrap:wrap;justify-content:center;}
	.art-list li{margin:0 10px}
	.art-left{display:flex;justify-content:center; margin-bottom:40px;}
	.art-right{display:flex;justify-content:center; margin-bottom:40px;}
	.tut-ttl{font:700 15px/20px 'Gotham Bold';padding:0 10px; margin-top: 10px;}
	.tut-subtitle{font:500 14px/20px 'Gotham Medium';padding-top:0; margin-top: 5px;}
        .art-list li {padding-bottom:20px;}
	.art-list li .ttl-name{font:700 15px/20px 'Gotham Bold';width:154px; margin-left: auto;margin-right: auto;}
	.art-list li .comp-name{font:500 14px/20px 'Gotham Medium';}
	.art-right{margin-left:auto;margin-right:auto}
	.f-ttl{width:auto;margin-right:auto;margin-left:auto;margin-bottom:20px}
        .f-ttl::after{width:100%}
        .y-ttl{font:400 19px/21px 'Gotham Ultra';width:40%;text-align:right;flex-direction:column;align-items:flex-end;margin-left:auto;display:flex;}
        .y-ttl .y-label {margin-bottom: 5px; display: inline-block; font: 400 28px/38px 'Gotham Ultra';}
        .y-ttl span{font:400 80px/58px 'Gotham Ultra';}
        .y-ttl,
        .rev-col .y-ttl {margin-right: 10px;}
        .not-rev.art-right.art-desc {width: auto;}
        .th-ttl{font:500 18px/24px 'Gotham Medium';margin-right:auto;margin-left:inherit;width:auto;text-align:left;justify-content:center;align-items:center;margin-bottom:0}
        .th-ttl::after{display: none;}
        .ttl-wrap:after {content: '';height: 2px;width: 100px;left: 50%;position: absolute;background: #fff;bottom: -20px;transform: translateX(-50%);}
	.modal{width:100%;height:100%}
	.modal-content{padding:0 25px}
	.prev span, .next span{display:none}
	.lt-desc{font:500 14px/20px 'Gotham Medium';margin-bottom:30px;margin-top:50px}
	.close svg{width:30px;margin-top:5px}
	.btm-text{font:400 12px/18px 'Gotham Book';}
	.next{right:25px}
	.prev, .next{top:345px;}
	.featured-article--section .featured-title h1{font-size:80px}
}

@media (max-width: 414px){
	.art-list li {
                padding: 0 10px;
                max-width: 50%;
                width: 50%;
                margin-right: 0;
                margin-left: 0;
                margin-bottom: 20px;
        }
        .art-list li img{width:100%;}
        .art-list li .ttl-name {width: 100%;}
        .art-img img {
                width: calc(100% - 20px);
        }
}