@charset "utf-8";
/* CSS Document */

.fadeIn, .fadeOut{
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;	
}
.fadeIn {
	opacity:1 !important;
	display:block !important;
}
.fadeOut {
	opacity:0 !important;
}
a img, a {
    border: none;
    outline: none;
}

#main_wrapper{
	position:absolute;
	border:1px solid #d7d7d7;    
    background: #FFF;
    /*background: url(../images/screen.png) no-repeat center;    */
    background-size: 300px;
	width:298px;
	height:248px;
	left:0px;
	right:0px;
	margin:auto;
	top:0px;
	overflow:hidden;	
}

#main_wrapper.change{
   /* background: url(../images/bg_change.png) no-repeat center;
    background-size: 100%;*/
}


#section_1{
	position:absolute;
	width: 298px;
	height: 155px;
}
#eyeBrow {
	width: 298px;
	height: 35.5px;
    background:url("../images/eyebrow.png") no-repeat -1px -1px;
    background-size: 300px;
	position:absolute;
	left: 0px;
	top:0px;
}
#dwLab {
    width: 298px;
    height: 120px;
    background:url("../images/dwlab.jpg") no-repeat -1px -1px;
    background-size: 300px;
	position:absolute;
	left: 0px;
	top:34px;
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#dwLab.end {
    opacity: 0;
}
#dwLeft {
    width: 116px;
    height: 120px;
    background:url("../images/drwhy_left.png") no-repeat;
    background-size: 116px;
	position:absolute;
	left: -1px;
	top:45px;
    z-index: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#dwLeft.init {
    -webkit-transform: translateX(-116px);
    -moz-transform: translateX(-116px);
    -o-transform: translateX(-116px);
    transform: translateX(-116px);
}
#mask {
    width: 229px;
    height: 161px;
    background:url("../images/mask.png") no-repeat;
    background-size: 229px 161px;
	position:absolute;
	right: -1px;
	top:40px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    opacity: 1;
}
#mask.init {
    width: 0px;
	height: 161px;
    background:url("../images/mask.png") no-repeat;
    background-size: 0px 161px;
	 -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease;
	-ms-transition: all .5s ease;
    transition: all .5s ease-out;
    
}
.ie #mask.init {
    background-size: 229px 161px;
}
#mask.end {
	-webkit-transform: translate(229px,0px);
	-moz-transform: translate(229px,0px);
	-o-transition: translate(229px,0px);
	-ms-transition: translate(229px,0px);
	transform: translate(229px,0px);
	
	-webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#frame_1{
	position:absolute;
	width:195px;
	height:60px;
    right: 11px;
    top: 64px;
	opacity:1;
	background:url(../images/frame1.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_1.init {
    opacity: 0;
}
#frame_2{
	position:absolute;
	width:147px;
	height:39.5px;
    left: 111px;
    top: 69px;
	opacity:1;
	background:url(../images/frame2.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_2.init {
    opacity: 0;
}
#frame_3{
	position:absolute;
	width:172px;
	height:56px;
    left: 102px;
    top: 64px;
	opacity:1;
	background:url(../images/frame3.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_3.init {
    opacity: 0;
}
#gMask {
    width: 298px;
    height: 120px;
    background:url("../images/gradient_mask.png") no-repeat -1px -1px;
    background-size: 300px;
	position:absolute;
	left: 0px;
	top:35px;
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#gMask.init {
    opacity: 0;
}
#dwRight {
    width: 103px;
    height: 111.5px;
    background:url("../images/drwhy_right.png") no-repeat;
    background-size: 103px;
	position:absolute;
	right: 32px;
    top: 43px;
    z-index: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#dwRight.init {
    -webkit-transform: translateX(137px);
    -moz-transform: translateX(137px);
    -o-transform: translateX(137px);
    transform: translateX(137px);
}
#dwRight.end {
    opacity: 0;
}
#frame_4{
	position:absolute;
	width:113.5px;
	height:64.5px;
    left: 36px;
    top: 62px;
	opacity:1;
	background:url(../images/frame4.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_4.init {
    opacity: 0;
}
#frame_5{
	position:absolute;
	width: 242px;
    height: 64px;
    left: 28px;
    top: 63px;
	opacity:1;
	background:url(../images/frame5.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_5.init {
    opacity: 0;
}
#frame_6{
	position:absolute;
	width: 276px;
    height: 52.5px;
    left: 9px;
    top: 45px;
	opacity:1;
	background:url(../images/frame6.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#frame_6.init {
    opacity: 0;
}

#cta{
	position:absolute;
	width: 281px;
    height: 32px;
    left: 9.5px;
    bottom: 13px;	
    background: #FFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; 
    transition: all 0.5s ease;
}
#cta.init {
    bottom: -40px;
    visibility: hidden;
}
#cta div {
    position: absolute;
    width: 281px;
    height: 32px;
    background:url(../images/cta_orange.png) no-repeat;	
    background-size: 280px;
    opacity: 1;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease; 
    transition: all 0.25s ease;
}
#cta div#pink {    
    opacity: 0;
    background:url(../images/cta_pink.png) no-repeat;
    background-size: 280px;
}
#lastbg.init{
	position:absolute;
	top:0px;
	left:px;
	opacity:0;
}
#lastbg{
	position:absolute;
	width: 300px;
    height: 250px;
    left: -1px;
    top: -1px;
	opacity:1;
	z-index:97;
	background:url(../images/lastbg.jpg) no-repeat;
    background-position: 0px top;
    background-size: contain;   
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; 
    transition: all 0.5s ease;
}

#section_1:hover #cta div#orange{
    opacity: 0;
}
#section_1:hover #cta div#pink {
    opacity: 1;
}
/*#link_1:hover #cta div{
    opacity: 0;
}*/
#clickTag{
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	z-index:99;	
	display:block;
	opacity:0;
    cursor: pointer;
}

.show{
	opacity:1 !important;
}




/*****************/
/*****************************section2***************************************/

#section2 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index:119;
	width: 298px;
	height: 95px;
	/*border-top: 1px solid #d5d5d5;*/
    background: #FFF url(../images/section2_bg.png) repeat-x top;
    background-size: 9px 29px;
    -webkit-transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
    -o-transition: all 0.5s !important;
    transition: all 0.5s !important;
}
#section2.init {
	bottom: -94px;
}
#section2.trans {
	-webkit-transition: all 1s !important;
    -moz-transition: all 1s !important;
    -o-transition: all 1s !important;
    transition: all 1s !important;
}
#section2.expand {
    height: 248px;
}
#section2.expand #scrollableArea {
    height: 201px;
}
#section2.expand #scrollableContent {
    height: 198px;
}
.isiBlockContent {
    padding: 0 5px;
    border: 1px solid #010101;
    color: #010101 !important;
    margin-top: -5px;
}
/* Scroll area styles starts */
#scrollableArea {
    width: 298px;
    height: 44px;
    z-index: 99;
    margin-bottom: 0px;
    font-family: Arial, sans-serif;
    background: transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#scrollableContent {
    position: absolute;
    overflow: hidden;
    width: 294px;
    height: 44px;
    padding-left: 4px;
    font-size: 12px;
    color: #2d2d2d;
    background-color: transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#scrollableContent h3 {
    font-size: 12px;
    margin: 7px 0;
	color: #76004B;
	font-weight: bold;
}
#scrollableContent p {
    margin: 5px 0;
	margin-left:1px;
}
#scrollableContent p strong {
    color: #76004B;
}
#scrollableContent h4 {
	font-weight: bold;
	margin: 3px 0px;
	font-size: 12px;
}
#scrollableContent h4 a {
	color: #2d2d2d;
	text-decoration: underline;
}
#scrollableContent strong {
	font-weight: bold;
    font-size: 12px
}
#scrollableContent span {
    height: 7px;
    width: 100%;
    display: block
}
#scrollableContent ul {
    margin: 0px 0px 0px 4px;
	padding-left: 0px;
    width: 260px;
}
#scrollableContent ul.black li {
    margin-bottom: 5px 0px 6px 0px;
	list-style: none;
	padding-left: 6px;
}
#scrollableContent ul li {
    margin-bottom: 4px;
    background-position: 3px 5px;
    list-style: none;
    padding-left: 10px;
    position: relative;
}
#scrollableContent ul li:before {
    content: "";
    width: 3px;
    height: 3px;
    position: absolute;
    top: 4.5px;
    left: 2.5px;
    border-radius: 6px;
    background: url(../images/isi_bullet.png) no-repeat;
    background-size: contain;
}
#scrollableContent ul li b {
    color: #76004B;
}


#scrollableContent ul li span.no-wrap {
	white-space:nowrap;
	font-family:normal;
}
.no-wrap{
	white-space:nowrap;
	font-style: normal;
}
#scrollableContent ul.inner {
    list-style-type: circle;
    margin: 3px 0px;
	padding-left: 0px;
}
#scrollableContent ul.inner li {
    background: url("../images/bullet_dash.png") no-repeat 0 4px;
	padding-left: 10px;
}
#sTitle sup {
	position: relative;
	top: 0px;
    vertical-align: super;
    font-size: 7px;
	font-weight:bold;
	line-height:0;
}
#scrollableContent sup {
	position: relative;
	top: 0px;
    vertical-align: super;
    font-size: 7px;
	font-weight:bold;
	line-height:0;
}
#scrollableContent h3 sup {
    top: 0px;
}

#scrollableContent a {
    color: #ff8d2e;
    text-decoration: none;
	font-weight:bold;	
}
#scrollableContent img {
    width: 275.5px;
    margin: 10px 0px;
}
#sTitle {
	font-family: Arial, sans-serif;
    font-size: 13px;
    color: #76004B;
    font-weight: bold;
    padding: 4px 0px 3px 4px;
    line-height: 12px;
	/*border-bottom:#a7a5a6 1px solid;*/
}
#sTitle span {
	text-transform:lowercase;
}
#scroller {
    position: absolute;
    z-index: 1;
    width: 90%;
	line-height:12px;
	margin-top:1px;
}
.iScrollVerticalScrollbar {
    position: absolute;
    z-index: 9999;
    width: 10px;
    bottom: 0px;
    top: 0px;
    right: 4px;
    overflow: hidden;
    background-color: #eaeaea;
    border-radius: 5px;
}
.iScrollIndicator {
    position: absolute
}
.iScrollVerticalScrollbar .iScrollIndicator {
   width: 10px;
    background-color: #7b7b7b;
    border: solid 1px #eaeaea;
    border-radius: 5px;
    box-sizing: border-box;
}

#scrollableContent::-webkit-scrollbar-track {
    background-color: #d1d1d1
}
#scrollableContent::-webkit-scrollbar {
    width: 10px;
    background-color: #696969
}
#scrollableContent::-webkit-scrollbar-thumb {
    background-color: #696969
}
#txtIndic {
    position: absolute;
    top: 1px;
    left: 291px;
}


#piLink {
	bottom: 0px;
	left: 0px;
	z-index: 10000;
	position: absolute;
	padding: 0 0 0 5px;
	background: #76004B;
	width: 100%;
	height: 16px;
    color: #ffffff;
    font-family: Arial;
    font-size: 6px;
    line-height: 15px;
}
#piLink a {	
    color: #ffffff;
    position: relative;
    top: 2px;
}
#piLink span {	
    position: absolute;
    top: 2px;
}


#isiBlockContent {
	margin-top:-3px;
	padding: 0 7px;
	border: 1px solid #010101;	
	color: #010101 !important;
	font-weight: bold;
}
#isiBlockContent h3 {
	color: #770049 !important;
	margin: 3px 0 -3px;
	padding-left: 0px;
}
#isiBlockContent p {
	padding-left: 0px;
	margin-top:8px;
}

#taptoreveal {
	position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
    width: 76px;
    height: 49px;
}
.moz_align{
		margin-top:6px !important;
}


@-moz-document url-prefix() {
    #eyeBrow {
        background-size: 300px 35.8px;
    }
	#stitle{
		padding-top:3px;
	}
	.moz_align{
		margin-top:5px !important;
	}
    #piLink {
        line-height: 13px;
    }
	.piLink-span{
		letter-spacing:-0.1px !important;
	}
	
	#scrollableContent{
		height:43px;
	}
    #section2.expand #scrollableContent {
        height: 197px;
	}
	.allignSup{
        top: 3px !important;
	}
	#scrollableContent sup {
	   left:0.5px;
	   top:-0.5px;
    }
	#scrollableContent h3 sup {
        top: -0.5px;
    }
    .contentBtn {    
        top: -1px !important;    
    }
	
}
#isiActionBtn {
    position: absolute;
    top: 4px;
    right: 0px;
    width: 52px;
    height: 19px;
    background: url(../images/isi_action_expand_collapse.png) no-repeat top right;
    background-size: 60px 38px;
    text-indent: -9000px;
}
#isiActionBtn.collapse {
    width: 60px;
    background-position: bottom right;
    background-size: 60px 38px;
}

.piLinkMoxAlign{
	top:-1px !important;
}
.align{
	top:-5px;
}