*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    margin:0;
    padding:0;
    background: url('../images/webappbdg.jpg');
    background-size: cover;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

@font-face {
    font-family: 'Metropolis-BlackItalic';
    src: url('../fonts/Metropolis-BlackItalic.eot');
    src: url('../fonts/Metropolis-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Metropolis-BlackItalic.svg#Metropolis-BlackItalic') format('svg'),
         url('../fonts/Metropolis-BlackItalic.ttf') format('truetype'),
         url('../fonts/Metropolis-BlackItalic.woff') format('woff'),
         url('../fonts/Metropolis-BlackItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis-ExtraBold';
    src: url('../fonts/Metropolis-ExtraBold.eot');
    src: url('../fonts/Metropolis-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Metropolis-ExtraBold.svg#Metropolis-ExtraBold') format('svg'),
         url('../fonts/Metropolis-ExtraBold.ttf') format('truetype'),
         url('../fonts/Metropolis-ExtraBold.woff') format('woff'),
         url('../fonts/Metropolis-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis-SemiBold';
    src: url('../fonts/Metropolis-SemiBold.eot');
    src: url('../fonts/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Metropolis-SemiBold.svg#Metropolis-SemiBold') format('svg'),
         url('../fonts/Metropolis-SemiBold.ttf') format('truetype'),
         url('../fonts/Metropolis-SemiBold.woff') format('woff'),
         url('../fonts/Metropolis-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
  

.app-wrapper-container {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    background-color: #fff;
    position: relative;
    scrollbar-color: #eee #3e3e40;
    scrollbar-width: none;
}

.app-wrapper-container::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: transparent;
}

.app-wrapper-container::-webkit-scrollbar{
    width: 2px;
    background-color: transparent;
}

.app-wrapper-container::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #eee;
}

.intro-screen {
    position: relative;
    padding-bottom: 34px;
    padding-top: 35px;
}

.top-head {
    height:248px;
    overflow: hidden;
}

.top-head .left-area {
    width:calc(100% - 40%);
    float: left;
    height: 248px;
    border-right: 3px solid #FFf;
}

.top-head .left-area img,
.top-head .h-half-column img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.top-head .h-half-column {
    height: 124px;
    overflow: hidden;
}

.mid-content {
    overflow: hidden;
}

.mid-content .top-story-strip {
    background-color: #ec2c06;
    padding: 15px;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.mid-content .top-story-strip h1{
    font-family: 'Metropolis-ExtraBold';
    color: #fff;
    margin: 0;
    font-size: 56px;
}

.mid-content .left-area {
    width: calc(100% - 58%);
    float: left;
    height: 151px;
    border-right: 3px solid #fff;
}

.mid-content .left-area img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.mid-content .right-area {
    width: calc(100% - 42%);
    float: left;
    height: 151px;
}

.mid-content .right-area .text-strip {
    color: #161616;
    text-align: center;
    font-family: 'Metropolis-SemiBold';
    font-size: 36px;
    padding: 5px;
    height: 64px;
}

.mid-content .right-area .left-column,
.mid-content .right-area .right-column {
    width: 50%;
    float:left;
    height: 89px;
}

.mid-content .right-area .left-column{
    border-right: 3px solid #fff;
}

.mid-content .right-area .left-column img,
.mid-content .right-area .right-column img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.bottom-foot {
    overflow: hidden;
    border-top: 3px solid #fff;
}

.bottom-foot .left-area{
    width: calc(100% - 56%);
    float: left;
    height: 122px;
}

.bottom-foot .right-area{
    width: calc(100% - 44%);
    float: left;
    height: 122px;
    padding: 35px 18px;
    border-left: 3px solid #fff;
}

.bottom-foot .right-area .static-text{
    color: #000;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0;
}

.bottom-foot .three-boxs{
    border-top: 3px solid #fff;
    overflow: hidden;
}

.bottom-foot .three-boxs .boxes {
    width: 33.3%;
    float: left;
    height: 100px;
}

.bottom-foot .three-boxs .boxes img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.bottom-foot .three-boxs .boxes:nth-child(3n-1) {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}

.subtext {
    font-family: 'Metropolis-BlackItalic';
    position: absolute;
    bottom: 7px;
    z-index: 0;
    left: 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 1px -2px 0px #000;
    display: inline-block;
    line-height: 16px;
    padding: 0 2px;
    width: 100%;
}

.top-head .right-area {
    width:calc(100% - 60%);
    float: right;
}

.redirection-strip {
    background-color: #fff;
    padding: 5px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}

.redirection-strip p {
    margin: 0;
    font-weight: 600;
    color: #010101;
    font-size: 12px;
}

.redirection-strip a {
    text-decoration: underline;
    color: #010101;
    font-weight: 600;
    font-size: 12px;
}

.main-screen {
    position: relative;
    padding-bottom: 75px;
}

.main-screen .featured-image {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 146px;
    width: 100%;
    margin: 0 4% 15px 0;
    max-width: 147px;
    float: left;
}

.main-screen .featured-image img{
    object-fit: cover;
    height:100%;
    width:100%;
}

.main-screen .content {
    width: 100%;
    overflow: hidden;
}

.main-screen .content h1,
.main-screen .featured-and-title h1 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    color: #1c1c1c;
    font-size: 18px;
}

.featured-and-title {
    width: 100%;
    position: relative;
}

.main-screen .content p {
    font-family: 'Noto Sans', sans-serif;
    color: #2a2a2a;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
}

.sticky-bottom-menu {
    background-color: #fff;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 8px 4px rgb(0 0 0 / 21%);
    height: 65px;
    overflow: hidden;
}

.sticky-bottom-menu ul {
    margin:0;
    padding:0;
    list-style:none;
}

.sticky-bottom-menu ul li{
    float: left;
    width: 25%;
    padding: 0 10px;
    text-align: center;
}

.sticky-bottom-menu ul li a {
    display: inline-block;
    color: transparent;
}

.sticky-bottom-menu ul li .pointer-event {
    pointer-events: none;
}

.sticky-bottom-menu ul li img{
    margin: 0 auto 2px;
    display: block;
    width: 22px;
}

.sticky-bottom-menu ul li i{
    margin: 0 auto 2px;
    display: block;
    font-size: 22px;
    color: #676767;
}

.sticky-bottom-menu ul li .liked i{
    color: #ed1c35;
}

.sticky-bottom-menu ul li span{
    font-family: 'Noto Sans', sans-serif;
    display: inline-block;
    font-weight: 700;
    font-size: 11px;
    color: #515151;
}

.modal-dialog {
    max-width: 340px;
    position: fixed;
    bottom: 140px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.modal-dialog .modal-content {
    border-radius: 15px;
}

.modal-dialog .modal-content .btn-close {
    color: #afafaf;
    opacity: 1;
    position: absolute;
    right: 8px;
    top: 7px;
    background: url(../images/close-icon.png) no-repeat center;
    background-size: 15px;
    z-index: 9;
}

.modal-dialog .modal-content .btn-close:focus {
    outline: 0;
    outline-offset: 0;
    box-shadow: none;
}

.modal-dialog .modal-content .modal-body {
    padding: 30px 15px;
}

.modal-dialog .modal-content .modal-body h3{
    font-family: 'Noto Sans', sans-serif;
    color: #2a2a2a;
    font-size: 20px;
    margin: 0 0 8px;
}

.modal-dialog .modal-content .modal-body a{
    font-family: 'Noto Sans', sans-serif;
    color: #656565;
    text-decoration: underline;
    font-weight: 500;
    font-size: 16px;
}

._50height .adsbygoogle {
    height: 50px;
    width: 360px;
    margin: 0 auto;
}

.sticky-bottom-menu ul li .shimmer i,
.sticky-bottom-menu ul li .shimmer span{
    color: transparent;
}

/********** New Intro Page ***********/
.new-intro-screen .logo{
    width: 100%;
    max-width: 200px;
    margin: 0 0 15px;
}

.new-intro-screen h1{
    color: #000000;
    font-weight: 400;
    font-size: 19px;
    margin: 0 0 15px;
}

.new-intro-screen ul{
    padding: 0;
    margin: 40px 0 45px;
    width: 100%;
    display: flex;
    list-style: none;
}

.new-intro-screen ul li{
    padding: 0 20px;
    border-right: 2px solid #000;
}

.new-intro-screen ul li:first-child{
    padding-left:0;
}

.new-intro-screen li:last-child{
    border-right: 0;
    padding-right: 0;
}

.new-intro-screen ul li p{
    color: #000;
    font-weight: 700;
    margin: 0;
    line-height: 18px;
    font-size: 17px;
}

.new-intro-screen ul li p span{
    color: #ff6600;
}

.new-intro-screen .new-intro-image{
    position: relative;
}

.new-intro-screen .new-intro-image:before,
.new-intro-screen .new-intro-image:after{
    content:'';
    position: absolute;
}

.new-intro-screen .new-intro-image:before{
    background: url(/assets/images/top-skew-img.png) no-repeat bottom left;
    width: 100%;
    height: 50px;
    background-size: 100%;
    top: -50px;
}

.new-intro-screen .new-intro-image:after{
    background: url(/assets/images/bottom-skew-img.png) no-repeat bottom left;
    width: 100%;
    height: 50px;
    background-size: 100%;
    bottom: 0;
}

._404_page .logo {
    width: 130px;
    margin: 0 0 30px;
}

._404_page h1 {
    color: #20344c;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0;
}

._404_page .featured-404 {
    width: 100%;
    max-width: 210px;
    margin: 40px auto 40px;
    display: block;
}

._404_page p {
    color: #383838;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.3px;
}

.shimmer {
    text-align: center;
    color: rgba(255,255,255,0.1);
    background: -webkit-gradient(linear, left top, right top, from(#F84F2B), to(#F84F2B), color-stop(0.5, #fff));
    background: -moz-gradient(linear, left top, right top, from(#676767), to(#676767), color-stop(0.5, #fff));
    background: gradient(linear, left top, right top, from(#676767), to(#676767), color-stop(0.5, #fff));
    -webkit-background-size: 150px 100%;
    -moz-background-size: 150px 100%;
    background-size: 150px 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-animation-name: shimmer;
    -moz-animation-name: shimmer;
    animation-name: shimmer;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #F84F2B;
}
  @-moz-keyframes shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @-webkit-keyframes shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @-o-keyframes shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @keyframes shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }