@font-face {
    font-family: Helvetica;
    src: url("../fonts/HelveticaNeue-Regular.ttf");
}
@font-face {
    font-family: Proximanova;
    src: url("../fonts/proximanova-regular-webfont.ttf");
}
@font-face {
    font-family: UTM-avo;
    src: url("../fonts/UTM Avo.ttf");
}

body{
	font-family: UTM-avo;
	background-color:#ffffff;
	font-size: 15px;
}
em{
	font-size:12px;
}
.ppp-mobile-img{
	display:none;
}
.ppp-ipad-img{
	display:none;
}
.ppp-desktop-img{
	display:block;
	}
.ppp-mobile-img-whatmisting{
	display:none;
}
.ppp-desktop-img-whatmisting{
	display:block;
	}
.social{
  position: absolute;
  right: 60px;
  top: 20px;
  z-index: 2000;
}
.social div {
		padding:5px;
	}
.ppp-container{
	padding-left:50px;
	padding-right:50px;
	/*font-family:"Proxima Nova";
	background-image:url('../img/Try-PPP-desktop_landing-page-1.jpg');*/
	background-repeat: no-repeat;
	position: relative;
	width: 100%;
	background-size: 100%;
	height: 100%;
	/*margin-bottom:100px;*/
}

.ppp-relative {
	position: relative;
}

.ppp-left{
	padding-right:20px;
}
.ppp-right{
	padding-left:20px;
}
.ppp-button{
	background-color:#00A3E4;
	/*margin:30px 20px 50px 20px;
	padding-right:150px;*/
	font-weight:bold;
	color: #FFF;
	border-radius: 8px;
	padding:5px;
}
.ppp-text-row{
	margin-bottom:30px;
}
.ppp-divider{
	background-image:url('../img/Try-PPP-desktop_dash.png');
	background-repeat: no-repeat;
	background-position:center;
	padding:20px;
}
.ppp-blank{
	/*margin-bottom:1100px;*/
	position: relative;
	width: 100%;
	background-size: 100%;
	margin:0 auto;
	padding:0px;
	z-index:1;
}
.ppp-TC{
	font-size:14px;
	font-weight:bold;
}
.ppp-watch{
	font-size:20px;
}
.alert {
	padding:5px;
	margin-bottom:5px;
}
.row0{
	background-color:#F3F5F3;
}
.row1{
	background-color:#FFFFFF;
}
.email-header{
	font-weight:bold;
	color:green;
}
.update_button{
	color:blue;
	font-weight:bold;
}
.updating_button{
	color:red;
	font-weight:bold;
}
.ppp-cf-container{
	padding-left:50px;
	padding-right:50px;
	font-family:"Proxima Nova";
	background-image:url('../img/Try-PPP-desktop_submit-page-1.jpg');
	background-repeat: no-repeat;
	position: relative;
	width: 100%;
	background-size: 100%;
	height: 100%;
	margin-bottom:100px;
}

.ppp-cf-blank{
	margin-bottom:350px;
}
.ppp-cf-center-image{
	background-image:url('../img/Try-PPP-desktop_ppp-shop-banner.jpg');
	background-repeat: no-repeat;
	background-position:center;
	height:336px;
}
.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .6s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 479px){

	.ppp-mobile-img{
		display:block;
	}
	.ppp-desktop-img{
		display:none;
	}
	.ppp-ipad-img{
		display:none;
	}
}
@media screen and (max-width: 768px) and (min-width:480px){
	.ppp-mobile-img{
		display:block;
	}
	.ppp-ipad-img{
		display:none;
	}
	.ppp-desktop-img{
		display:none;
	}
}
@media screen and (max-width: 1024px) and (min-width:769px){

	.ppp-mobile-img{
		display:none;
	}
	.ppp-desktop-img{
		display:none;
	}
	.ppp-ipad-img{
		display:block;
	}
}

/* Start of Column CSS */
#container4 {
	clear:left;
	width:80%;
	overflow:hidden;
	background:#67caf1; /* column 4 background colour */
	color: #ffffff;
	margin: auto;
}
#container3 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#4dc2ee; /* column 3 background colour */
}
#container2 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#33b9ee; /* column 2 background colour */
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#1ab0eb; /* column 1 background colour */
}
#col1 {
	float:left;
	width:21%;
	position:relative;
	left:77%;
	overflow:hidden;
}
#col2 {
	float:left;
	width:21%;
	position:relative;
	left:81%;
	overflow:hidden;
}
#col3 {
	float:left;
	width:21%;
	position:relative;
	left:85%;
	overflow:hidden;
}
#col4 {
	float:left;
	width:21%;
	position:relative;
	left:89%;
	overflow:hidden;
}
/* --> */
/* Style Hover Image */
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover {
  -webkit-filter: grayscale(100%);
}

.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

#flake {
		color: #fff;
		position: absolute;
		font-size: 25px;
		top: -50px;
	}
	
#flake {
		color: #00a3e4;
		position: absolute;
		font-size: 25px;
		top: -50px;
		}
		
.header .girl {
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 1;
}
.header .girl object {
    width: 530px;
    height: 486px;
    z-index: 1;
}
.header .girl2 object {
    width: 460px;
    height: 486px;
    z-index: 1;
}
.animph {
    background: #ffffff url("http://event.pppcare.com.vn/8-3/img/face-after.jpg") no-repeat scroll 0 0 / 100% auto;
    display: block;
    height: 486px;
    width: 286px;
}

.wrapimg {
    border-top: 5px solid rgba(0, 0, 0, 0);
    height: 488px;
    overflow: hidden;
    position: absolute;
    width: 353px;
}

.textimg {
    color: #ffffff;
    font-size: 38px;
    font-weight: 700;
    left: 39px;
    margin: 5px 0 0;
    position: absolute;
    top: 395px;
}

.wrapimg1 {
    background: #ffffff url("http://event.pppcare.com.vn/8-3/img/face-before.jpg") no-repeat scroll 0 0;
    border-bottom: 1px solid #ffffff;
    height: 486px;
    overflow: hidden;
    position: absolute;
    width: 286px;
}


/* Image Hover */

.img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
  	-moz-transition: all .3s ease; /* Firefox */
  	-o-transition: all .3s ease; /* IE 9 */
  	-ms-transition: all .3s ease; /* Opera */
  	transition: all .3s ease;
}
.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:translatZ(0) scale(1.10); /* Opera */
    transform:translatZ(0) scale(1.10);
}
  
  
.grayscale {
  -webkit-filter: brightness(1.10) grayscale(100%) contrast(90%);
  -moz-filter: brightness(1.10) grayscale(100%) contrast(90%);
  filter: brightness(1.10) grayscale(100%); 
}

/* Button Div */

.buttonlink{
	background: none;
	width: 150px;
	padding: 10px;
	color: #ffffff;
	text-shadow: 1.5px 0 #ffffff;
	border: 1px solid #ffffff;
	border-radius: 30px;
}

.buttonlink:hover{
	background: #ffffff;
	padding: 10px;
	color: #625752;
	text-shadow: 1.5px 0 #625752;
	border: 1px solid #ffffff;
	border-radius: 30px;
}