@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
html,body{
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	color:#333333;
}

.navbar{
	height:70px;
	padding:10px;
	background:rgba(255,255,255,0.99);
	box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
}
	.navbar .logo{
		height:100%;
		max-height:60px;
		
	}

.base{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#6b6c64 url('../img/background.jpg') 0% 100% no-repeat;
	background-size:cover;
}

	.base .overlay{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:rgba(0,0,0,0.4);
	}
	
.chat{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	max-width:480px;
	background:#fff;
	padding-top:70px;
}

	.chat.slide{
		
		right:-500px;
		-webkit-animation: slide 1.5s ease;
		animation: slide 1.5s ease ;
	}

.message{
	margin:15px 20px 15px;
}

	.message:after{
		display:block;
		content:'';
		clear:both;
	}

	.message .avatar{
		width:80px;
		height:80px;
		border-radius:50%;		
	}

	.message .bubble-wrapper{
		width:calc(100% - 90px);
	}

	.message .name{
		color:#666666;
		font-size:14px;
		font-weight:600;
		margin-bottom:5px;
	}

	.message .bubble{
		border-radius:8px;
		padding:15px;
		text-align:left;
		line-height:1.4;
		position:relative;
		display:inline-block;
		text-align:left;
	}
	
		.message.me .avatar{
			background: url('../img/james.jpg') 50% 50% no-repeat;
			background-size:cover;			
			float:right;
		}
		
		.message.me .bubble-wrapper{
			float:right;
			text-align:right;
			padding-right:15px;
		}
		
		.message.me .name{
			text-align:right;
			margin-right:10px;
		}
		
			.message.me .name:after{
				content:'James';
			}
			
		.message.me .bubble{
			background:#e3f2fd;
		}
		
			.message.me .bubble:after {
				content: '';
				position: absolute;
				top: 10px;
				left: 100%;
				width: 0; 
				height: 0;
				border-left: 8px solid #e3f2fd;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
			}
	
		.message.agent .avatar{
			background: url('../img/agent.png') 50% 50% no-repeat;
			background-size:cover;			
			float:left;
		}
		
		.message.agent .bubble-wrapper{
			float:left;
			text-align:left;
			padding-left:15px;
		}
		
		.message.agent .name{
			text-align:left;
			margin-left:10px;
		}
		
			.message.agent .name:after{
				content:'Agent';
			}
			
		.message.agent .bubble{
			background:#f3f3f3;
		}
		
			.message.agent .bubble:after {
				content: '';
				position: absolute;
				top: 10px;
				right: 100%;
				width: 0; 
				height: 0;
				border-right: 8px solid #f3f3f3;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
			}
			
.iphone{
	position:fixed;
	right:10%;
	bottom:-65%;
	width:80%;
	max-width:400px;
	background: url('../img/iphone.png') 50% 00% no-repeat;
	background-size:cover;	
	padding: 160px 30px 0;	
	min-height:60%;
}		

	.iphone.active{
		bottom:-10%;
		-webkit-animation: jump 1.5s ease;
		animation: jump 1.5s ease ;
	}

	.iphone .date{
		font-size:0.9em;
		color:#b4b4b7;
		margin:10px 0;
		text-align:center;
		font-weight:600;
		
	}
		.iphone .message{
			background:#e5e5ea;
			border-radius:12px;
			display:inline-block;
			padding:15px;
			font-size:1.3em;
			line-height:1.5;
			position:relative;
			display:none;
			overflow:hidden;
		}
				
			.iphone .message:after {
				content: '';
				position: absolute;
				bottom: 10px;
				right: 100%;
				width: 0; 
				height: 0;
				border-right: 12px solid #e5e5ea;
				border-top: 10px solid transparent;
				border-bottom:2px solid transparent;
			}
			
			.iphone .message a{
				font-weight:600;
				color:#0069ff;
			}
			


@keyframes slide {
  0%{    
	right:0;
  }
  100%{    
	right:-500px;
 }
}		

@keyframes jump {
  0%{    
	bottom:-60%;
  }
  80%{
    
	bottom:-5%;
  }
  100%{    
	bottom:-10%;
 }
}

@media (max-width: 991px){
	.navbar{
		text-align:center;
	}
	
	.chat{
		background:rgba(255,255,255,0.4);
	}
		.message .name{
			color:#fff;
		}
		
		.message.me .avatar{
			border:2px solid #fff;
		}
	
}


@media (max-width: 500px){
	
	.iphone{
		padding-top: 30%;	
	}
}