#infographic {
    margin-top: 10px;
	height: 380px;
	background-image: url(http://web.asiaone.com/fullwidth/ndp/_img/asiaone_hwbg.jpg);
	background-position: 50% !important;
    background-size: cover !important;
}

.wrap {
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;	
	padding: 15px;
}

.content-video {
	padding: 0;
		
}
#infographic .banner-wrap {
    padding: 10px 30px;
    background-color: rgba(241,247,248,0.9);
    color: #333;  
}

#infographic .banner-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 1.2;
	color: #33374b;
	font-weight: 700;
}


#infographic .banner-title:before {
    background-repeat: no-repeat;
    height:0px;
    display: block;
    content: ' ';
}

#infographic .banner-title:after {
    background-repeat: no-repeat;
    height:15px;
	width:15px;
	background: #ffec00;
    display: inline-block;
    content: ' ';
}

#infographic .banner-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    line-height: 1.35;
	font-weight: 700;
    margin-bottom: 10px;
}

#infographic .banner-caption {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    line-height: 1.35;
	font-weight: 400;
    margin-bottom: 10px;
}

#infographic .banner-link {
    background-color: #FFEC00;
    color: #33374b;
     font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

#infographic .banner-link {
    display: inline-block;
    padding: 10px 20px;
    xmargin: 20px 0px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.banner-but {
	display: inline-flex;
}

.advanced-banner:before {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    background-position: 50% !important;
    background-size: cover !important;
}

@media (min-width: 1200px) {
#infographic {
    height: 420px;
	background-image: url("http://web.asiaone.com/fullwidth/ndp/_img/asiaone_hwbg.jpg");
	}
	.fullwidth-banner .banner-wrap {
		width: 40%;
	}
}

@media (max-width: 767px) {
#infographic {
    background-image: url("http://web.asiaone.com/fullwidth/ndp/_img/asiaone_hwbg768.jpg");
	height: auto;
	}
	.banner-wrap {
		background-color: #ffcE00;
		padding: 0px;
		margin: auto;
	}	


#infographic .banner-wrap {
    padding: 10px 30px;
    background-color: rgba(241,247,248,0.9);
    color: #333;  
}
	}

 	
@media (max-width: 767px){
	.banner-wrap {
		order: 2;
	}
	.content-video {
		order: 1;
	}
	.insert-image {
		order: 1;
	}
    #cf4a {
        min-height: 280px !important;
}
    #infographic .banner-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.35;
	font-weight: 700;
    margin-bottom: 10px;
}

#infographic .banner-caption {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 1.35;
	font-weight: 400;
    margin-bottom: 10px;
}
}

@-webkit-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-moz-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-o-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

#cf4a {
   position:relative;
   width:100%;
   margin:0 auto;
   min-height: 348px;
}

#cf4a img {
   position:absolute;
   left:0;
   width: 100%;
}

#cf4a img {
   -webkit-animation-name: cf4FadeInOut;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 16s;

   -moz-animation-name: cf4FadeInOut;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-iteration-count: infinite;
   -moz-animation-duration: 16s;

   -o-animation-name: cf4FadeInOut;
   -o-animation-timing-function: ease-in-out;
   -o-animation-iteration-count: infinite;
   -o-animation-duration: 16s;

   animation-name: cf4FadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 16s;
}

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
    
    z-index:4;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 4s;
   -moz-animation-delay: 4s;
   -o-animation-delay: 4s;
   animation-delay: 4s;
    
    z-index:3;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;
    
    z-index:2;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   animation-delay: 12s;
    
    z-index:1;
}