/*
 * CSS for smart.com.ph/corporate
 * Copyright 2013 Smart Communications, Inc.
 *
 * Inherits from core.css
 */

/*Typography Localization*/
#smart footer .footermain p, #smart #sub_footer p, #smart footer .footermain .container .upperfooter .boxes ul.list li, #smart footer .footermain  .legal p, #smart footer .footermain .legal .right ul li
{
	font-size: 16px;
}
#smart #main .h1, #smart #main h1 {font-size: 40px; line-height: 46px; font-weight: 400;}
#smart #main .h2, #smart #main h2 {font-size: 32px; line-height: 38px; font-weight: 400;}
#smart #main .h3, #smart #main h3 {font-size: 24px; line-height: 30px; font-weight: 400;}
#smart #main .h4, #smart #main h4 {font-size: 20px; line-height: 26px; font-weight: 400;}
#smart #main .h5, #smart #main h5 {font-size: 18px; line-height: 24px; font-weight: 400;}
#smart #main .h6, #smart #main h6 {font-size: 16px; line-height: 22px; font-weight: 400;}
#smart p
{
	font: 20px "Lato", Georgia, Helvetica, Arial, sans-serif;
	line-height: 26px;
	font-weight: 300;
}
#smart p.introduction
{
    font: 24px "Lato", Georgia, Helvetica, Arial, sans-serif;
	line-height: 30px;
	font-weight: 300;
}
#smart p.text
{
    font: 22px "Lato", Georgia, Helvetica, Arial, sans-serif;
	line-height: 28px;
	font-weight: 300;
}
#smart ul, #smart ol {
    font: 20px "Lato", Georgia, Helvetica, Arial, sans-serif;
}
#smart ul p, #smart ol p
{
	font: 20px "Lato", Helvetica, Arial, sans-serif;
	line-height: 26px;
	font-weight: 300;
}
#smart ul p.text, #smart ol p.text
{
    font: 20px "Lato", Georgia, Helvetica, Arial, sans-serif;
    line-height: 22px;
	font-weight: 300;
}
#smart #inside ul li, #main ol li, #main #inside ol li
{
    line-height: 28px;
    font-size: 18px;
    font-weight: 300;
}
#smart #main td, #smart #main th, #smart #main td ul
{
    font-size: 16px;
	font-weight: 300;
}
#smart header #topnav .navigation ul li#gn-search div#search div#smart_search_form input
{
	font-size: 14px;
}
#smart .btn
{
	font-size: 16px;
}
#smart a.arrowlink, #smart a.arrowback 
{
    font-size: 16px;
    font-weight: 400;
}

/* Theme
-------------------------------------------------*/

/* Main Home Page */
#smart header #core-nav  {z-index: 999998}
#smart #main {margin-top: 0;}
@media (max-width: 767px) {
	#smart header .stickynav-mobile-sticky-wrapper { display: none !important; }
}
#smart #main #mainhome .top .banners
{
    position: relative;
    height: 445px;
    overflow: hidden;
}
#smart #main #mainhome .top .banners div.img
{
    margin:0; padding:0;
    height: 445px;
    left: 50% !important;
    margin-left: -960px;
    margin-top: -198px;
    position: relative;
    top: 198px !important;
    width: 1920px;
}
#smart #main #mainhome .top .banners div.img img
{
    margin:0; padding:0;
    height: 445px;
}

/* Main Brands */

#smart #main .container .mainbrands
{
    padding: 30px 10px 0;
}
#smart #main .container .mainbrands #brandtabs ul.nav
{
    list-style: none;
    margin: 0;
    padding: 0;
    height: 129px;
}
#smart #main .container .mainbrands #brandtabs ul.nav li
{
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    line-height: normal;
}
#smart #main .container .mainbrands #brandtabs ul.nav li a
{
    text-decoration: none;
    padding: 20px 5px 30px 5px;
    border: 1px solid #eee;
    display: block;
    width: 302px;
    background: #FFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #FFF /*{a-body-background-start}*/), to( #FBFBFB /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #FFF /*{a-body-background-start}*/, #FBFBFB /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient( #FFF /*{a-body-background-start}*/, #FBFBFB /*{a-body-background-end}*/); /* FF3.6 */
    background-image: -ms-linear-gradient( #FFF /*{a-body-background-start}*/, #FBFBFB /*{a-body-background-end}*/); /* IE10 */
    background-image: -o-linear-gradient( #FFF /*{a-body-background-start}*/, #FBFBFB /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image: linear-gradient( #FFF /*{a-body-background-start}*/, #FBFBFB /*{a-body-background-end}*/);
}
#smart #main .container .mainbrands #brandtabs ul.nav li a span.icon
{
    display: block;
    height: 80px;
    width: 80px;
    float: left;
}
/* Postpaid Tab */
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a
{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
    border-right: none;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a:hover, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a.current
{
    border: 1px solid #0098d3;
    background: #0098d3;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #5dc6f1 /*{a-body-background-start}*/), to( #0098d3 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* FF3.6 */
    background-image: -ms-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* IE10 */
    background-image: -o-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image: linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/);
    border-right: none;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a:active, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a.current, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a.current:hover
{
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a span.icon
{
    background: transparent url('../../images/tab-postpaid-1.png') no-repeat 0 0;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a:hover span.icon, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-one a.current span.icon
{
    background: transparent url('../../images/tab-postpaid-2.png') no-repeat 0 0;
}

/* Prepaid Tab */
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a
{
    border-right: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a:hover, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a.current
{
    border: 1px solid #19a739;
    background: #19a739;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #89ee67 /*{a-body-background-start}*/), to( #19a739 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #89ee67 /*{a-body-background-start}*/, #19a739 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient( #89ee67 /*{a-body-background-start}*/, #19a739 /*{a-body-background-end}*/); /* FF3.6 */
    background-image: -ms-linear-gradient( #89ee67 /*{a-body-background-start}*/, #19a739 /*{a-body-background-end}*/); /* IE10 */
    background-image: -o-linear-gradient( #89ee67 /*{a-body-background-start}*/, #19a739 /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image: linear-gradient( #89ee67 /*{a-body-background-start}*/, #19a739 /*{a-body-background-end}*/);
    border-right: none;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a:active, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a.current, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a.current:hover
{
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a span.icon
{
    background: transparent url('../../images/tab-prepaid-1.png') no-repeat 0 0;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a:hover span.icon, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-two a.current span.icon
{
    background: transparent url('../../images/tab-prepaid-2.png') no-repeat 0 0;
}

#smart #main #broadband .broimage { width:420px; height: 294px; display:block; background: transparent url('../../images/bro-tab1.jpg') no-repeat 0 0; float:left; -webkit-transition: background-image 0.4s ease-in-out; -moz-transition: background-image 0.4s ease-in-out; -o-transition: background-image 0.4s ease-in-out; transition: background-image 0.4s ease-in-out;}
#smart #main #broadband .broimage:hover {   background: transparent url('../../images/bro-tab2.jpg') no-repeat 0 0; }

/* Broadband Tab */
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a
{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a:hover, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a.current
{
    border: 1px solid #0098d3;
    background: #0098d3;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #5dc6f1 /*{a-body-background-start}*/), to( #0098d3 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* FF3.6 */
    background-image: -ms-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* IE10 */
    background-image: -o-linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image: linear-gradient( #5dc6f1 /*{a-body-background-start}*/, #0098d3 /*{a-body-background-end}*/);
    border-right: none;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a:active, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a.current, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a.current:hover
{
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a span.icon
{
    background: transparent url('../../images/tab-bro-1.png') no-repeat 0 0;
}
#smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a:hover span.icon, #smart #main .container .mainbrands #brandtabs ul.nav li.nav-three a.current span.icon
{
    background: transparent url('../../images/tab-bro-2.png') no-repeat 0 0;
}

#smart #main .container .mainbrands #brandtabs ul.nav li a .spiels h2
{
    color: #555;
    margin: 0 0 5px 0;
}
#smart #main .container .mainbrands #brandtabs ul.nav li a .spiels p
{
    font: 18px "Lato", Helvetica, Arial, Sans-serif;
    color: #555;
    margin: 0;
    line-height: 22px;
	font-weight: 300;
}
#smart #main .container .mainbrands #brandtabs ul.nav li a:hover .spiels h2, #smart #main .container .mainbrands #brandtabs ul.nav li a:hover .spiels h2, #smart #main .container .mainbrands #brandtabs ul.nav li a.current .spiels h2
{
    color: #FFF;
}
#smart #main .container .mainbrands #brandtabs ul.nav li a:hover .spiels p, #smart #main .container .mainbrands #brandtabs ul.nav li a:active .spiels p, #smart #main .container .mainbrands #brandtabs ul.nav li a.current .spiels p
{
    color: #FFF;
}

#smart #main .container .mainbrands #brandtabs .list-wrap div.details
{
    height: 420px;
}
#smart #main .container .mainbrands #brandtabs .list-wrap div.details a.link
{
    font: 22px "Lato", Helvetica, Arial, Sans-serif;
    text-decoration: none;
}
#smart #main .container .mainbrands #brandtabs .list-wrap div.details a.link:hover
{
    color: #007db2;
}
#smart #main .container .mainbrands #brandtabs .list-wrap div#prepaid, #smart #main .container .mainbrands #brandtabs .list-wrap div#broadband
{
    display: none;
}

/* Main Brands */
#smart #main .container .subbrands
{
    padding: 30px 10px 15px 0;
}
#smart #main .container .subbrands .brand
{
    float: left;
    margin-right: 20px;
    width: 460px;
}
#smart #main .container .subbrands .brand.b
{
    margin-right:0px
}
#smart #main .container .subbrands .brand .image
{
    float: left;
    width: 140px;
    height: 226px;
}
#smart #main .container .subbrands .brand .text a.link
{
    font: 20px "Lato", Helvetica, Arial, Sans-serif;
    text-decoration: none;
}
#smart #main .container .subbrands .brand .text a.link:hover
{
    color: #007db2;
}

/* News Ticker */

#smart #main .container .newsroom
{
    background: #f1f1f1;
    clear: both;
    margin: 28px 0;
    position: relative;
    padding: 10px 0 10px 9px;
    width: 960px;
}
#smart #main .container .newsroom p
{
    margin-bottom:0;
}
#smart #main .container .newsroom .title
{
    padding: 5px 12px 6px 15px;
    width: 68px;
    float: left;
    border-right: 1px solid #b2b2b2;
    font-weight: bold;
}
#smart #main .container .newsroom .title p
{
    font-weight:bold;
    color:#444;
}
#smart #main .container .newsroom .mainticker
{
    padding: 4px 10px 4px 6px;
    width: 600px;
    float: left;
    position:relative;
    border-left:1px solid #f2f2f2;
}
#smart #main .container .newsroom .links
{
    padding: 11px 10px 13px 14px;
    position: absolute;
    top: 5px;
    left: 738px;
}
#smart #main .container .newsroom .links a
{
    display:block;
    position:absolute;
    height:24px;
    width:24px;
    text-indent:-9000px;
    top: 9px;
}

#smart #main .container .newsroom .links a.facebook
{
    background: url("../../images/facebook-24x24.png") no-repeat scroll 0 top transparent;
    left: 121px;
}
#smart #main .container .newsroom .links a.twitter
{
    background: url("../../images/twitter-24x24.png") no-repeat scroll 0 top transparent;
    left: 156px;
}
#smart #main .container .newsroom .links a.linkedin
{
    background: url("../../images/linkedin-24x24.png") no-repeat scroll 0 top transparent;
    left: 191px;
}

/* Campaigns Boxes */

#smart #main .container .campaigns
{
    padding: 45px 10px;
    margin-bottom: 20px;
}
#smart #main .container .campaigns .box
{
    width:220px;
    margin-right:20px;
    float:left;
    text-align:center;
}
#smart #main .container .campaigns .box.last
{
    margin-right:0;
}
#smart #main .container .campaigns .box p, #smart #main .container .campaigns .box h5, #smart #main .container .campaigns .box h6
{
    margin-bottom:2px;
}
#smart #main .container .campaigns .box h6
{     
    margin-top:0;
	font-weight: normal;
}

/* Instagram */
#smart #main .instagram
{
    background: #B9D9EB;
}
#smart #main .instagram .container h4
{
    padding:12px 10px 3px;
    border-bottom: 1px solid #d9d9d9;
    margin:0;
}
#smart #main .instagram .container .feed 
{
    display: block;
    height: 125px;
    margin-top: 25px;
}
#smart #main .instagram .container .feed ul
{
    margin:0;
    padding:0;
}
#smart #main .instagram .container .feed ul li
{
    margin: 0 18px 0 18px;
    padding: 0;
    list-style: none;
    float: left;
}
#smart #main .instagram .container .feed ul li img
{
    height: 124px;
}
#smart #main .instagram .container .feed ul li img
{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-transition: .25s all ease-in; 
    -o-transition: .25s all ease-in;
    -moz-transition: .25s all ease-in; 
    transition: .25s all ease-in;
}
#smart #main .instagram .container .feed ul li img:hover
{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
/* Bootstrap Slider
-------------------------------------------------*/
.carousel-inner div img
{
    margin: 0;
    padding: 0;
    position: relative;
    width: 1920px;
}
.carousel .carousel-control
{
    visibility: hidden;
}
.carousel:hover .carousel-control
{
    visibility: visible;
}
.carousel.carousel-fade .item
{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.carousel.carousel-fade .active.left, .carousel.carousel-fade .active.right
{
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}
.carousel.carousel-fade .next, .carousel.carousel-fade .prev
{
    left: 0;
    z-index: 1;
}
.carousel.carousel-fade .carousel-control
{
    z-index: 3;
}
.carousel:hover .carousel-control
{
    text-decoration: none !important;
}
.carousel-control.right
{
    background: url('../../images/slider_nav.png') no-repeat center 0;
    background-position: -50px 0px;
}
.carousel-control.right:hover
{
    background: url('../../images/slider_nav.png') no-repeat center 0;
    background-position: -150px 0px;
}
.carousel-control.left
{
    background: url('../../images/slider_nav.png') no-repeat center 0;
    background-position: 0px 0px;
}
.carousel-control.left:hover
{
    background: url('../../images/slider_nav.png') no-repeat center 0;
    background-position: -100px 0px;
}
.carousel-control
{
    background-color: none !important;
    border: none !important;
    height: 50px !important;
    width: 50px !important;
    opacity: 1 !important;
    top: 218px !important;
}

#smart #main #mainhome .carousel .carousel-control {
    visibility: visible;
}

#smart #main #mainhome .top .carousel-control em {
    font-size: 80px;
    color: #333;
}

#smart #main #mainhome .top .carousel .carousel-control {
    top: 38% !important;
    height: 0px !important;
    width: 15% !important;
}

/* Fix for annoying extra Widget Placeholders
-------------------------------------------------*/
div[placeholderid="ExtraScripts"], div[placeholderid="ContentArea"], div[placeholderid="Footer"]
{
    display:none;
}

#smart #main #inside .top .bannertemp /* Banners for Simple Template pages (Under page title/breadcrumb) */
{
    background: transparent url('../../images/sbanner-blue.jpg') repeat 0 0;
	

}


#smart header #stickynav-mobile {display: none;}

/*container fixes*/

@media (min-width: 768px)	
{
	.container, #smart #main .container .campaigns{width: 750px!important;}
}

@media (min-width: 992px)	
{
	.container, #smart #main .container .campaigns{width: 970px!important;}
}

@media (min-width: 1200px)	
{
	.container, #smart #main .container .campaigns{width: 1170px!important;}
}

/*Corporate Revamp 09082016*/
#smart .revamp-container {
	padding: 50px 0;
}

#smart .online-store
{
	/*background: rgba(76,196,117,1);
	background: -moz-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,196,117,1)), color-stop(32%, rgba(89,203,123,1)), color-stop(69%, rgba(43,170,125,1)), color-stop(100%, rgba(22,147,139,1)));
	background: -webkit-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -o-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -ms-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc475', endColorstr='#16938b', GradientType=1 );
	color: #fff;*/
	text-align: center;
	padding: 50px 0;
	margin-top: -25px;
}

#smart .online-store p,
#smart .perks p,
#smart .my-smart p ,
#smart .help-content p{
	font-size: 20px;
    line-height: 28px;
}

#smart .my-smart .col-xs-12 {
	margin-top: 20px;
}

#smart .my-smart .col-xs-12 a {
	margin: 8px 0;
}


#smart .online-store a,
#smart .online-store a:hover {
	color: #fff;
	text-decoration: none;
}

#smart .online-store .row .col-xs-6 {
	float: left;
	    margin: 10px 0;
}

#smart .perks .row .col-md-6 .col-sm-6 img {
	margin-bottom: 10px;
}

#smart .perks .row .col-md-6 .col-sm-6 {
	float: left;
	margin: 10px 0;
}

#smart .online-store .row .col-xs-6 img {
	margin-bottom: 10px;
}

#smart .my-smart .row .col-xs-6 {
	float: left;
	margin: 10px 0;
}

#smart .my-smart .row .col-xs-6 img {
	margin-bottom: 10px;
}

#smart .my-smart
{
	/*background: rgba(22,147,139,1);
	background: -moz-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(22,147,139,1)), color-stop(28%, rgba(43,170,125,1)), color-stop(55%, rgba(104,197,137,1)), color-stop(100%, rgba(65,174,130,1)));
	background: -webkit-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: linear-gradient(135deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16938b', endColorstr='#41ae82', GradientType=1 );	color: #fff;*/
	text-align: center;
	padding: 50px 0;
}

#smart .perks
{
	text-align: center;
	padding: 100px 0;
	background: #f1f1f1;
}

#smart .bg-1 {
    /*background: rgba(76,196,117,1);
	background: -moz-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,196,117,1)), color-stop(32%, rgba(89,203,123,1)), color-stop(69%, rgba(43,170,125,1)), color-stop(100%, rgba(22,147,139,1)));
	background: -webkit-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -o-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: -ms-linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	background: linear-gradient(45deg, rgba(76,196,117,1) 0%, rgba(89,203,123,1) 32%, rgba(43,170,125,1) 69%, rgba(22,147,139,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc475', endColorstr='#16938b', GradientType=1 );
	text-align: center;
	padding: 50px 0;*/
	color: #fff;
	background: url('/SmartRevamp/AssetsResponsive/images/BG1C.jpg') no-repeat center center fixed;
    background-size: cover;
}

#smart .bg-2 {
	/*text-align: center;
	padding: 50px 0;
	background: #f1f1f1;
    background-size: cover;*/
	background: url('/SmartRevamp/AssetsResponsive/images/BG2.jpg') no-repeat top center fixed;
    color:#fff;
    background-size:cover;
}

#smart .bg-3 {
	/*background: rgba(22,147,139,1);
	background: -moz-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(22,147,139,1)), color-stop(28%, rgba(43,170,125,1)), color-stop(55%, rgba(104,197,137,1)), color-stop(100%, rgba(65,174,130,1)));
	background: -webkit-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	background: linear-gradient(135deg, rgba(22,147,139,1) 0%, rgba(43,170,125,1) 28%, rgba(104,197,137,1) 55%, rgba(65,174,130,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16938b', endColorstr='#41ae82', GradientType=1 );	color: #fff;
	text-align: center;
	padding: 50px 0;
	color: #fff;
    background-size: cover;*/
	background: url('/SmartRevamp/AssetsResponsive/images/BG3C.jpg') no-repeat bottom center fixed;
    color:#fff;
    background-size:cover;
}
/*
section {
    padding-top:50px;
    padding-bottom:50px;
}*/

#smart .divider {
    height:50px;
}

#smart .online-store .row,
#smart .perks .row {
	    margin: 40px 0;
}

#smart .online-store .row p,
#smart .perks .row  p,
#smart .my-smart .row  p {
	    font-size: 15px;
		line-height: 22px;
}

#smart .perks h1 {
	color: #2dbe60;
	margin-top: -25px;
}

#smart .perks p {
	color: #555;
}

#smart .online-store a.btn,
#smart .perks a.btn {
	margin: 15px 0;
}

#smart .help-content {
    background: #151719;
    margin: 20px 0;
     padding: 20px 0 0;
    color: #fff;
	height: auto;
	margin-bottom: 70px;
}

#smart .postpaid1 h4,
#smart .prepaid1 h4,
#smart .broadband1  h4 {
	text-align: center;
	font-size: 17px !important;
}

#smart .postpaid1,
#smart .prepaid1,
#smart .broadband1 {
	margin: 25px;
	text-align: center;
}

#smart .postpaid1:hover,
#smart .prepaid1:hover,
#smart .broadband1:hover { 
	transform: scale(1.1); 
	cursor: pointer;
	}

#smart .postpaid-gradient {
    width: 70%;
    padding: 20px;
    margin: 25px;
    border-radius: 10px;
	color: #fff;
	height: 280px;
	background: rgba(6,123,206,1);
	background: -moz-linear-gradient(-45deg, rgba(6,123,206,1) 0%, rgba(6,123,206,1) 9%, rgba(45,190,96,1) 78%, rgba(45,190,96,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(6,123,206,1)), color-stop(9%, rgba(6,123,206,1)), color-stop(78%, rgba(45,190,96,1)), color-stop(100%, rgba(45,190,96,1)));
	background: -webkit-linear-gradient(-45deg, rgba(6,123,206,1) 0%, rgba(6,123,206,1) 9%, rgba(45,190,96,1) 78%, rgba(45,190,96,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(6,123,206,1) 0%, rgba(6,123,206,1) 9%, rgba(45,190,96,1) 78%, rgba(45,190,96,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(6,123,206,1) 0%, rgba(6,123,206,1) 9%, rgba(45,190,96,1) 78%, rgba(45,190,96,1) 100%);
	background: linear-gradient(135deg, rgba(6,123,206,1) 0%, rgba(6,123,206,1) 9%, rgba(45,190,96,1) 78%, rgba(45,190,96,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#067bce', endColorstr='#2dbe60', GradientType=1 );
}

#smart .prepaid-gradient {
    width: 70%;
    padding: 20px;
    margin: 25px;
    border-radius: 10px;
	color: #fff;
	height: 280px;
	background: rgba(3,250,155,1);
	background: -moz-linear-gradient(-45deg, rgba(3,250,155,1) 0%, rgba(2,41,169,1) 98%, rgba(2,41,169,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(3,250,155,1)), color-stop(98%, rgba(2,41,169,1)), color-stop(100%, rgba(2,41,169,1)));
	background: -webkit-linear-gradient(-45deg, rgba(3,250,155,1) 0%, rgba(2,41,169,1) 98%, rgba(2,41,169,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(3,250,155,1) 0%, rgba(2,41,169,1) 98%, rgba(2,41,169,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(3,250,155,1) 0%, rgba(2,41,169,1) 98%, rgba(2,41,169,1) 100%);
	background: linear-gradient(135deg, rgba(3,250,155,1) 0%, rgba(2,41,169,1) 98%, rgba(2,41,169,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03fa9b', endColorstr='#0229a9', GradientType=1 );
}

#smart .broadband-gradient {
    width: 70%;
    padding: 20px;
    margin: 25px;
    border-radius: 10px;
	color: #fff;
	height: 280px;
	background: rgba(9,189,132,1);
	background: -moz-linear-gradient(-45deg, rgba(9,189,132,1) 0%, rgba(5,236,147,1) 87%, rgba(5,236,147,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(9,189,132,1)), color-stop(87%, rgba(5,236,147,1)), color-stop(100%, rgba(5,236,147,1)));
	background: -webkit-linear-gradient(-45deg, rgba(9,189,132,1) 0%, rgba(5,236,147,1) 87%, rgba(5,236,147,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(9,189,132,1) 0%, rgba(5,236,147,1) 87%, rgba(5,236,147,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(9,189,132,1) 0%, rgba(5,236,147,1) 87%, rgba(5,236,147,1) 100%);
	background: linear-gradient(135deg, rgba(9,189,132,1) 0%, rgba(5,236,147,1) 87%, #54aa77 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09bd84', endColorstr='#05ec93', GradientType=1 );
}

#smart .help-content p.below-banner {
	margin: 20px 0;
}

#smart a.contact-support {
		margin: -12px 0;
}
	
@media only screen and (max-width: 736px) and (min-width: 415px) {
.revamp-container {
    margin: 0 50px;
	}
	
	section {
    height: auto;
	}
	
	a.need-help {
		padding-top: 20px;
	}
	
	a.contact-support {
		margin: 20px 0;
	}
	
	.online-store .row .col-md-3 {
		margin: 20px 0;
	}
	
	.online-store .row .col-md-3 img {
		margin-bottom: 20px;;
	}
}

/****08252016****/
HTML  CSS  JS  Result
EDIT ON
 *, *:before, *:after {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

hr.sep {
  border: 0px;
  height: 1px;
  background: #fff;
  margin: 1.4em auto;
  width: 3em;
}

main > section:nth-child(1):not(.site-menu), main > article:nth-child(1):not(.site-menu) {
  z-index: 2;
}
main > section:nth-child(2):not(.site-menu), main > article:nth-child(2):not(.site-menu) {
  z-index: 3;
}
main > section:nth-child(3):not(.site-menu), main > article:nth-child(3):not(.site-menu) {
  z-index: 4;
}

.mast {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  width: 100%;
  color: #fff;
  margin-bottom: 1em;
}
.mast:after {
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); 
}
.mast__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-size: cover;
  background-color: #111;
  -webkit-animation: fade-in 1s ease both;
          animation: fade-in 1s ease both;
}
.mast__header {
  z-index: 5;
  position: fixed;
  width: 100%;
  top: 45%;
  text-align: center;
  -webkit-animation: fade-in 2s 1.5s ease both;
          animation: fade-in 2s 1.5s ease both;
}
.mast__pretitle {
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ani-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes ani-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes ani-height {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes ani-height {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
VIEW SCSS CODERERUN

/*CoreCSS Edits 09082016*/

#smart a:hover {
    text-decoration: none !important;
}


/* for brands icons, carousel 09232016 */
@media screen and (max-width: 1199px) {

		.social-button {
			margin: 0 40px !important;
		}
		
		figure.effect-sadie p {
			bottom: 8% !important;
		}
		
		.st-head {
			font-size: 24px !important;
		}
		
}

@media screen and (max-width: 991px) {

		.social-button {
			margin: 0 0px !important;
		}
		
		.t-head {
			font-size: 36px !important;
			font-weight: 400 !important;
		}
		
		.st-head {
			font-size: 20px !important;
		}
		
}

@media screen and (max-width: 767px) {

		.social-buttons {
			text-align: center;
	}

		
}

@media screen and (max-width: 479px) {
	
	.grid figure {
			height: 328px !important;
	}
	
	.effect-sadie img {
		width: 1920px !important;
		height: 328px !important;
		max-width: 1920px !important;
	}
	
	.jepo {
		display: none !important;
	}
	
	figure.effect-sadie p {
		opacity: 1 !important;
		-webkit-transform: translate3d(0,0px,0) !important;
		transform: translate3d(0,0px,0) !important;
		bottom: 14% !important;
		left: 0 !important;
	}
	
	figure.effect-sadie figcaption::before {
		opacity: 0 !important;
		display: none !important; 
	}

	
}
/* end for brands icons */

#smart div.sidenavigation h4 {
	margin-bottom: 0 !important;
}

#smart div.sidenavigation ul.navigation, #smart div.sidenavigation ul.rtsUL, #smart div.sidenavigation ul.rsmList {
	width: 300px;
}

#smart div.sidenavigation ul.navigation li, #smart div.sidenavigation ul.rtsUL li.rtsLI, #smart div.sidenavigation ul.rsmList li.rsmItem {
	height: 37px;
}

#smart div.sidenavigation ul.rtsUL li.rtsLI a span.rtsTxt, #smart div.sidenavigation ul.rtsUL li.rtsLI a span.rtsOut, #smart div.sidenavigation ul.rtsUL li.rtsLI a span.rtsIn {
	text-align: left;
}

blockquote {
	font-size: 14px;
}

@media (max-width: 991px) {
	html, body {
		min-width: 0 !important;
	}

	#smart #main .top .pagedetails {
		padding-bottom: 5px;
	}
}


@media (max-width: 767px) {
	#smart #main {
		margin-top: 0;
	}

	blockquote {
		margin-left: 10px !important;
	}

	.text-justify-xs {
		text-align: justify;
	}
	.text-left-xs {
		text-align: left;
	}

	.RadTabStrip_Default 
  	, .rtsLevel
  	, #smart div.sidenavigation 
  	, #smart div.sidenavigation ul.rtsUL {
	    width: 100%;
  	}
}