h5模仿iphone4经典滑动解锁效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>iPhone4 on pure CSS3!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="TjRus">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="iPhone4 on pure CSS3!" />
<meta itemprop="name" content="iPhone4 on pure CSS!!!">
<meta itemprop="description" content="This would be a description of the content your users are sharing">


<style>
    /*!
 * iPhone4 on CSS3
 * tjrus.com/iphone
 *
 * Copyright (c) 2011 Vasil Zubach
 *
 * Author	Vasil Zubach
 */

.iphone {
	margin: 0;
	display: block;
	position: relative;
	background: #e8e7e6;
	width: 368px;
	height: 734px;
	border-radius: 58px;
	-moz-border-radius: 58px;
	-webkit-border-radius: 58px;
	border: 1px solid #868381;
	box-shadow: #c1bfbf 0 0 0 1px;
	-moz-box-shadow: #c1bfbf 0 0 0 1px;
	-webkit-box-shadow: #c1bfbf 0 0 0 1px;
	padding: 2px;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
}

.iphone:after {
	content: '';
	width: 4px;
	height: 3px;
	position: absolute;
	top: -1px; left: 120px;
	background: rgba(0,0,0,0.7);
	box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}

.iphone:before {
	content: '';
	width: 373px;
	height: 3px;
	position: absolute;
	top: 646px; left:0px;
	background: rgba(0,0,0,0.7);
	box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	z-index: 0;
}

.iphone * {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}


/* ---------------------------------------------------------------------------- */
.iphone_power_button {
	height: 4px;
	position: absolute;
	width: 60px;
	background: #000;
	top: -5px;
	left: 250px;
	cursor: pointer;
	background: #ccc;
	background: linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -moz-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -webkit-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -o-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	-webkit-border-radius: 2px 2px 0 0;
	box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
	-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
	-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
}


/* ---------------------------------------------------------------------------- */
.iphone_voice_toogle {
	background: linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -webkit-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -moz-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	background: -o-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
	position: absolute;
	width: 4px;
	height: 34px;
	top: 66px;
	left: -5px;
	border-radius: 1px 0 0 1px;
	-moz-border-radius: 1px 0 0 1px;
	-webkit-border-radius: 1px 0 0 1px;
	box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}


/* ---------------------------------------------------------------------------- */
.iphone_voice_plus {
	background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	position: absolute;
	width: 4px;
	height: 26px;
	top: 144px;
	left: -5px;
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}


/* ---------------------------------------------------------------------------- */
.iphone_voice_minus {
	background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%,  #e7e7e6 83%, #898684 98%, #504d4b 100%);
	position: absolute;
	width: 4px;
	height: 26px;
	top: 210px;
	left: -5px;
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
	-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}


/* ---------------------------------------------------------------------------- */
.iphone_black_bg {
	width: 100%;
	height: 100%;
	background: #000;
	border-radius: 56px;
	-moz-border-radius: 56px;
	-webkit-border-radius: 56px;
	box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
	-moz-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
	-webkit-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
	z-index: 1;
	position: relative;
}

.iphone_black_bg:after {
	content: '';
	position: absolute;
	width: 320px;
	height: 480px;
	left: 19px;
	top: 121px;
	border: 5px solid rgba(14,14,14,0.5);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	overflow: hidden;
	z-index: 2;
	display: block;
}


/* ---------------------------------------------------------------------------- */
.iphone_camera {
	position: absolute;
	width: 17px;
	height: 17px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	left: 113px;
	top: 56px;
	background: radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
	background: -webkit-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
	background: -moz-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
	background: -o-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
	box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
	-moz-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
	-webkit-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
	overflow: hidden;
	z-index: 1000;
}

.iphone_camera:after {
	content: '';
	position: absolute;
	display: block;
	width: 7px;
	height: 7px;
	top: 5px;
	left: 5px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background: radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
	background: -webkit-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
	background: -moz-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
	background: -o-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
	box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
	-moz-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
	-webkit-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
}

.iphone_camera:before {
	content: '';
	position: absolute;
	display: block;
	width: 2px;
	height: 2px;
	top: 7px;
	left: 9px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index: 100;
	background: #2b5d90;
	box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
	-moz-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
	-webkit-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
}


/* ---------------------------------------------------------------------------- */
.iphone_dynamic {
	position: absolute;
	width: 60px;
	height: 10px;
	padding: 6px 6px 0 6px;
	overflow: hidden;
	left: 148px;
	top: 57px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	background: linear-gradient(top, #141415, #414141);
	background: -webkit-linear-gradient(top, #141415, #414141);
	background: -moz-linear-gradient(top, #141415, #414141);
	background: -o-linear-gradient(top, #141415, #414141);
	box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
	-moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
	-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
	z-index: 10;
}

.iphone_dynamic:after {
	content: '';
	position: absolute;
	z-index: 1;
	width: 60px;
	height: 7px;
	top: 5px;
	left: 6px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background: linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
	background: -webkit-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
	background: -moz-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
	background: -o-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
}

.iphone_dynamic:before {
	content: '';
	position: absolute;
	z-index: 100;
	width: 10px;
	height: 10px;
	top: 8px;
	left: 0px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background: radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
	background: -webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
	background: -moz-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
	background: -o-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
	opacity:0.8;
}

.iphone_dynamic span {
	background: rgba(0,0,0,0.2);
	width: 1px;
	height: 1px;
	display: block;
	float: left;
	z-index: 3;
	position: relative;
	margin: 1px 1px 0 0 ;
}

.iphone_dynamic span:nth-child(3n+1) { box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; }
.iphone_dynamic span:nth-child(4n+1) { box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; }
.iphone_dynamic span:nth-child(7n+1) { box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; }


/* ---------------------------------------------------------------------------- */
.iphone_light_gradient {
	position: absolute;
	width: 360px;
	height: 729px;
	top: 5px;
	right: 5px;
	border-radius: 53px;
	-moz-border-radius: 53px;
	-webkit-border-radius: 53px;
	background: linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	overflow: hidden;
	z-index: 2;
}


/* ---------------------------------------------------------------------------- */
.iphone_home {
	position: absolute;
	width: 70px;
	height: 70px;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	top: 637px;
	left: 151px;
	box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
	-moz-box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
	-webkit-box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
	overflow: hidden;
	z-index: 105;
	cursor: pointer;
}

.iphone_home:after {
	content: '';
	position: absolute;
	width: 21px;
	height: 21px;
	border: 2px solid #a3a4a3;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
	-moz-box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
	-webkit-box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
	left: 23px;
	top: 23px;
	z-index: 3;
}

.iphone_home:active {
	box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
	-moz-box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
	-webkit-box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
}

.iphone_home:active:after {
	top: 22px;
}


/* ---------------------------------------------------------------------------- */
.iphone_display {
	position: absolute;
	width: 320px;
	height: 480px;
	left: 26px;
	top: 128px;
	background: red;
	z-index: 1002;
	overflow: hidden;
	background: linear-gradient(top, #666, #333);
	background: -webkit-linear-gradient(top, #666, #333);
	background: -moz-linear-gradient(top, #666, #333);
	background: -o-linear-gradient(top, #666, #333);
}

.iphone_display.off {
	background: #000;
}

.iphone_display::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
	z-index: 1;
}


/* ---------------------------------------------------------------------------- */
.iphone_headline {
	position: absolute;
	top: 0;
	top: -20px;
	left: 0;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 19px;
	border-bottom: 1px rgba(0,0,0,0.3) solid;
	overflow: hidden;
	z-index: 3;
}

.iphone_net {
	position: absolute;
	top:4px;
	left: 4px;
	width: 19px;
	height: 10px;
	overflow: hidden;
}

.iphone_net::after {
	content: '';
	position: absolute;
	right: 0;
	top:0;
	display: block;
	width: 3px;
	height: 10px;
	background: #c6c6c6;
	box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
	-moz-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
	-webkit-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
}

.iphone_net_title {
	font: bold 13px/19px "Helvetica Neue";
	color: #c6c6c6;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	text-transform: uppercase;
	position: absolute;
	left: 26px;
	top:0;
}

.iphone_wi-fi {
	top: -14px;
	left: 70px;
	width: 25px;
	height: 25px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	overflow: hidden;
	position: absolute;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
}

.iphone_wi-fi:after {
	content: '';
	top: 12px;
	left: 12px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	position: absolute;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border: 2px #c6c6c6 solid;
}

.iphone_wi-fi:before {
	content: '';
	top: 17px;
	left: 17px;
	width: 10px;
	height: 10px;
	overflow: hidden;
	position: absolute;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border: 2px #c6c6c6 solid;
}

.iphone_wi-fi .hack {
	position: absolute;
	left: 22px;
	top: 22px;
	width: 4px;
	height: 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #c6c6c6;
	z-index: 6;
}

.iphone_clock {
	font: bold 13px/19px "Helvetica Neue";
	color: #c6c6c6;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	text-transform: uppercase;
	position: absolute;
	left:0;
	top:0;
	display: none;
	width: 100%;
	text-align: center;
}

.iphone_lock {
	width: 10px;
	height: 7px;
	position: absolute;
	background: #c6c6c6;
	top: 8px;
	left: 156px;
}

.iphone_lock:after {
	content: '';
	position: absolute;
	top: -5px;
	left: 2px;
	width: 4px;
	height: 5px;
	border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border: 1px solid #c6c6c6;
	box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
	-moz-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
	-webkit-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
}

.iphone_battery {
	position: absolute;
	height: 8px;
	width: 18px;
	border: 1px solid #c6c6c6;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	right: 6px;
	top: 4px;
}

.iphone_battery:after {
	content: '';
	position: absolute;
	height: 2px;
	width: 1px;
	border: 1px solid #c6c6c6;
	right: -3px;
	top: 2px;
}

.iphone_battery:before {
	content: '';
	position: absolute;
	height: 6px;
	width: 16px;
	background: #c6c6c6;
	left: 1px;
	top: 1px;
}


/* ---------------------------------------------------------------------------- */
.iphone_header {
	position: absolute;
	width: 100%;
	background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	left: 0;
	top: 20px;
	top: -113px;
	height: 93px;
	border-bottom: 1px rgba(255,255,255,0.2) solid;
	box-shadow: rgba(0,0,0,0.4) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 0;
	text-align: center;
	color: #fff;
	text-shadow: rgba(0,0,0,0.3) 0 -1px 0;
	z-index: 2;
}

.iphone_header .iphone_time {
	font: 200 65px/69px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 100%;
}
.iphone_header .iphone_time span {
	position: relative;
	top: -4px;
}

.iphone_header .iphone_date {
	font: 200 17px/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 100%;
	position: relative;
	top: -3px;
}


/* ---------------------------------------------------------------------------- */
.iphone_footer {
	position: absolute;
	width: 100%;
	background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
	left: 0;
	bottom: 0;
	bottom: -97px;
	height: 95px;
	border-top: 1px rgba(255,255,255,0.4) solid;
	box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
	z-index: 2;
}

.iphone_unlock {
	width: 279px;
	height: 51px;
	position: absolute;
	left: 50%;
	margin-left: -139px;
	top: 20px;
	background: linear-gradient(top, #020509, #232527);
	background: -webkit-linear-gradient(top, #020509, #232527);
	background: -moz-linear-gradient(top, #020509, #232527);
	background: -o-linear-gradient(top, #020509, #232527);
	border: 1px solid #333;
	border-radius: 13px;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
}

.iphone_slider {
	position: absolute;
	width: 69px;
	height: 45px;
	left: 0;
	top: 3px;
	background: linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
	background: -webkit-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
	background: -moz-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
	background: -o-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
	-moz-box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
	z-index: 10;
	margin: 0 3px;
	cursor: pointer;
}

.iphone_slider:after{
	content: '';
	background: #8c8c8c;
	width: 18px;
	height: 12px;
	left: 21px;
	top: 17px;
	position: absolute;
	box-shadow: rgba(255,255,255,0.3) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0;
	-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0;
}

.iphone_slider:before{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 34px;
	top: 11px;
	border-top: 12px solid transparent;
	border-left: 24px solid #8c8c8c;
	border-bottom: 12px solid transparent;
	transform: scaleX(0.6);
	-webkit-transform: scaleX(0.6);
	-moz-transform: scaleX(0.6);
	-o-transform: scaleX(0.6);
	z-index: 1;
}

.iphone_slide2unlock {
	position: absolute;
	left: 93px;
	font: 200 26px/51px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	transform: scaleX(0.99);
	-webkit-transform: scaleX(0.99);
	-moz-transform: scaleX(0.99);
	-o-transform: scaleX(0.99);
	top: 0;
	color: #fff;
	z-index: 4;
}


/* ---------------------------------------------------------------------------- */
.iphone_dock {
	border-bottom: 42px solid rgba(255,255,255,0.15);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 300px;
	position: absolute;
	left: 0;
	bottom: 4px;
	bottom: -80px;
	z-index: 5;
}

.iphone_dock:after {
	content: '';
	position: absolute;
	top: 42px;
	left: -10px;
	display: block;
	width: 320px;
	height: 4px;
	background: linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -moz-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
}

.iphone_dock:before {
	content: '';
	position: absolute;
	top: 0px;
	left: -100px;
	display: block;
	width: 320px;
	border-radius: 0 0 300px/40px 0;
	-moz-border-radius: 0 0 300px/40px 0;
	-webkit-border-radius: 0 0 300px/40px 0;
	height: 30px;
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%,  rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
	z-index: -1;
}


/* ---------------------------------------------------------------------------- */
.iphone_icons_containter {
	top: 34px;
	width: 320px;
	position: relative;
	display: block;
	position: absolute;
	left: 0;
}

.icon {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
	float: left;
	margin-bottom: 30px;
	z-index: 10;
	position: absolute;
}

.icon span {
	display: block;
	text-align: center;
	font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #fff;
	text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;
	text-transform: capitalize;
	position: absolute;
	top: 58px;
	left: -10px;
	width: 76px;
}

.icon:nth-child(4n + 1) { left:17px; }
.icon:nth-child(4n + 2) { left:92px; }
.icon:nth-child(4n + 3) { left:168px; }
.icon:nth-child(4n + 4) { left:243px; }

.icon:nth-child(-n + 16) { top: 258px; }
.icon:nth-child(-n + 12) { top: 172px; }
.icon:nth-child(-n + 8) { top: 86px; }
.icon:nth-child(-n + 4) { top: 0; }

.iphone_dock .icon {
	position: relative;
	margin-top: -30px;
	z-index: 10;
	top: 0; left: 0;
}

.iphone_dock .icon:nth-child(1) { margin-left:7px; margin-right: 19px; }
.iphone_dock .icon:nth-child(2) { margin-right: 20px; }
.iphone_dock .icon:nth-child(3) { margin-right: 19px; }


/* ---------------------------------------------------------------------------- */
.i_message, .i_contacts, .i_calendar, .i_clock, .i_notes, .i_reminders, .i_mail, .i_app_store, .i_videos, .i_youtube, .i_maps, .i_calculator, .i_itunes, .i_stocks, .i_voice_memos, .i_weather, .i_phone, .i_safari, .i_camera, .i_music {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	overflow: hidden;
}


/* ---------------------------------------------------------------------------- */
.i_message {
	background: linear-gradient(top, #015801, #06f700);
	background: -webkit-linear-gradient(top, #015801, #06f700);
	background: -moz-linear-gradient(top, #015801, #06f700);
	background: -o-linear-gradient(top, #015801, #06f700);
	overflow: hidden;
}

.i_message .bg_angled {
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	width: 125%;
	height: 125%;
	position: absolute;
	left: -7px;
	top: -7px;
	background-size: 4px 4px;
	-moz-background-size: 4px 4px;
	-webkit-background-size: 4px 4px;
	-o-background-size: 4px 4px;
	background-color: none;
	background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.i_message:after{
	content: '';
	box-shadow: inset #06f700 0 0 2px;
	-moz-box-shadow: inset #06f700 0 0 2px;
	-webkit-box-shadow: inset #06f700 0 0 2px;
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index: 2;
}

.i_message:before{
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	display: block;
	border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	background: rgba(255,255,255,0.5);
	z-index: 5;
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_message .bulb {
	position: absolute;
	width: 39px;
	height: 32px;
	top: 50%;
	left: 50%;
	margin-left: -19.5px;
	margin-top: -16px;
	border-radius: 50%/50%;
	-moz-border-radius: 50%/50%;
	-webkit-border-radius: 50%/50%;
	background: linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -o-linear-gradient(bottom, #fff, #cbdae9 50%);
	box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	z-index: 2;
}

.i_message .bulb {
	position: absolute;
	width: 39px;
	height: 32px;
	top: 47%;
	left: 50%;
	margin-left: -19.5px;
	margin-top: -16px;
	border-radius: 50%/50%;
	-moz-border-radius: 50%/50%;
	-webkit-border-radius: 50%/50%;
	background: linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%);
	background: -o-linear-gradient(bottom, #fff, #cbdae9 50%);
	box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	z-index: 2;
}

.i_message .tail {
	position: absolute;
	background: #fff;
	width: 11px;
	height: 7px;
	left: 11px;
	bottom: 12px;
	border-radius: 0 0 100% 0/ 0 0 100% 0;
	-moz-border-radius: 0 0 100% 0/ 0 0 100% 0;
	-webkit-border-radius: 0 0 100% 0/ 0 0 100% 0;
	z-index: 1;
	box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
}

.i_message .tail:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	left: -6px;
	top: -3px;
	background: linear-gradient(bottom, #05d400, #04ba00);
	background: -webkit-linear-gradient(bottom, #05d400, #04ba00);
	background: -moz-linear-gradient(bottom, #05d400, #04ba00);
	background: -o-linear-gradient(bottom, #05d400, #04ba00);
}

.i_message .tail:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	left: -6px;
	top: -3px;
	background-size: 4px 4px;
	-moz-background-size: 4px 4px;
	-webkit-background-size: 4px 4px;
	-o-background-size: 4px 4px;
	background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	z-index: 10;
}

.i_message .hack {
	background: linear-gradient(top, #ebf1f7, #fff);
	background: -webkit-linear-gradient(top, #ebf1f7, #fff);
	background: -moz-linear-gradient(top, #ebf1f7, #fff);
	background: -o-linear-gradient(top, #ebf1f7, #fff);
	width: 5px;
	height: 5px;
	left: 15px;
	top: 36px;
	position: absolute;
	z-index: 10;
	border-radius:0 0 3px 0;
	-moz-border-radius:0 0 3px 0;
	-webkit-border-radius:0 0 3px 0;
}


/* ---------------------------------------------------------------------------- */
.i_contacts {
	background: linear-gradient(top, #e0b77a, #d6983f);
	background: -webkit-linear-gradient(top, #e0b77a, #d6983f);
	background: -moz-linear-gradient(top, #e0b77a, #d6983f);
	background: -o-linear-gradient(top, #e0b77a, #d6983f);
}

.i_contacts:after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 10px;
	height: 100%;
	background: linear-gradient(left, #36251c, #8b5c40);
	background: -webkit-linear-gradient(left, #36251c, #8b5c40);
	background: -moz-linear-gradient(left, #36251c, #8b5c40);
	background: -o-linear-gradient(left, #36251c, #8b5c40);
	box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0;
	-moz-box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0;
	-webkit-box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0;
	border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
}

.i_contacts .right_side {
	position: absolute;
	width: 8px;
	padding: 0 0 0 2px;
	height: 100%;
	top: 0;
	right: 0;
	font: bold 4px/9px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
	text-transform: uppercase;
	color: #d59460;
	z-index: 3;
	text-shadow: rgba(0,0,0,1) 0 0 1px,  rgba(0,0,0,1) 0 0 1px;
	background-size: 100% 17%;
	-moz-background-size: 100% 17%;
	-webkit-background-size: 100% 17%;
	-o-background-size: 100% 17%;
	background-image: linear-gradient(top, transparent 0%, transparent 90%,  #32251d 100%);
	background-image: -webkit-linear-gradient(top, transparent 0%, transparent 90%,  #32251d 100%);
	background-image: -moz-linear-gradient(top, transparent 0%, transparent 90%,  #32251d 100%);
	background-image: -o-linear-gradient(top, transparent 0%, transparent 90%,  #32251d 100%);
	border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	opacity: 0.6;
}

.i_contacts .left_side {
	position: absolute;
	width: 8px;
	height: 100%;
	top: 8px;
	left: 0;
	z-index: 3;
	border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
}

.i_contacts .left_side hr {
	position: relative;
	display: block;
	margin: 0 0 3px 0;
	padding: 0;
	height: 1px;
	width: 9px;
	border: none;
	background: linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -webkit-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -moz-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -o-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	z-index: 7;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.i_contacts .left_side hr:before {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #000;
	z-index: 0;
	top: -50%;
	right: -10%;
	box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px;
	-moz-box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px;
	-webkit-box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px;
}

.i_contacts .left_side hr:after {
	content: '';
	position: absolute;
	display: block;
	height: 1px;
	width: 9px;
	border: none;
	background: linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -webkit-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -moz-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	background: -o-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%);
	z-index: 7;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.i_contacts .profile {
	position: absolute;
	width: 17px;
	height: 5px;
	top: 31px;
	left: 18px;
	border-radius: 50% 50% 0 0 / 3px 3px 0 0;
	-moz-border-radius: 50% 50% 0 0 / 3px 3px 0 0;
	-webkit-border-radius: 50% 50% 0 0 / 3px 3px 0 0;
	background: #814b2b;
	box-shadow: inset #270000 0 1px 1px;
	-moz-box-shadow: inset #270000 0 1px 1px;
	-webkit-box-shadow: inset #270000 0 1px 1px;
}

.i_contacts .profile .head {
	position: absolute;
	width: 7px;
	height: 8px;
	top: -10px;
	left: 33%;
	border-radius: 50% / 3px 3px 4px 4px;
	-moz-border-radius: 50% / 3px 3px 4px 4px;
	-webkit-border-radius: 50% / 3px 3px 4px 4px;
	background: #814b2b;
	box-shadow: inset #270000 0 1px 2px;
	-moz-box-shadow: inset #270000 0 1px 2px;
	-webkit-box-shadow: inset #270000 0 1px 2px;
	transform: scaleY(1.2);
	-webkit-transform: scaleY(1.2);
	-moz-transform: scaleY(1.2);
	-o-transform: scaleY(1.2);
}

.i_contacts .profile .neck{
	position: absolute;
	width: 1px;
	height: 0;
	top: -4px;
	left: 39%;
	border-bottom: 6px solid #814b2b;
	border-left: 2px solid transparent;
	border-right: 2px solid transparent;
}


/* ---------------------------------------------------------------------------- */
.i_calendar {
	background: linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%);
	background: -webkit-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%);
	background: -moz-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%);
	background: -o-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%);
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_calendar .day {
	height: 14px;
	text-align: center;
	font:bold 9px/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #fff;
	text-shadow: rgba(0,0,0,0.2) 0 1px 0;
}

.i_calendar .day_num {
	font: bold 40px/42px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #333333;
	text-align: center;
	box-shadow: inset rgba(0,0,0,0.5) 0 0 10px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0 0 10px;
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 0 10px;
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
}


/* ---------------------------------------------------------------------------- */
.i_clock { background: #000 }

.i_clock:before{
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	display: block;
	border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	background: rgba(255,255,255,0.2);
	z-index: 1;
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_clock:after{
	content: '';
	width: 48px;
	height: 47px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	left: 4px;
	top: 4px;
	position: absolute;
	display: block;
	background: #fff;
	z-index: 2;
	box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px  ;
	-moz-box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px  ;
	-webkit-box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px  ;
}

.i_clock .gray_blick {
	position: absolute;
	width: 44px;
	height: 35px;
	background: #eee;
	border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%;
	-moz-border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%;
	top: 15px;
	left: 6px;
	z-index: 3;
}

.i_clock .center_dot {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	left: 25px;
	top: 25px;
	background: #eee;
	box-shadow: #000 0 0 0 1px;
	-moz-box-shadow: #000 0 0 0 1px;
	-webkit-box-shadow: #000 0 0 0 1px;
	z-index: 10;
}

.i_clock .center_dot:after {
	content: '';
	width: 3px;
	height: 3px;
	background: #dd0000;
	position: absolute;
	top: 1px;
	left: 1px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: inset #eee 0 0 1px;
	-moz-box-shadow: inset #eee 0 0 1px;
	-webkit-box-shadow: inset #eee 0 0 1px;
}

.i_clock .second {
	position: absolute;
	left: 27px;
	top: 10px;
	width: 1px;
	height: 18px;
	z-index: 11;
	background: #dd0000;
}

.i_clock .minute {
	position: absolute;
	left: 35px;
	top: 13px;
	width: 0px;
	height: 0px;
	z-index: 3;
	border-bottom: 30px solid rgba(0,0,0,1);
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg);
	-webkit-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg);
	-moz-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg);
	-o-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg);
}

.i_clock .hour {
	position: absolute;
	left: 19px;
	top: 10px;
	width: 0px;
	height: 0px;
	z-index: 3;
	border-bottom: 25px solid rgba(0,0,0,1);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	transform: scale(0.4) scaleY(2) rotate(-60deg);
	-webkit-transform: scale(0.4) scaleY(2) rotate(-60deg);
	-moz-transform: scale(0.4) scaleY(2) rotate(-60deg);
	-o-transform: scale(0.4) scaleY(2) rotate(-60deg);
}

.i_clock ul { margin: 0; padding: 0;}

.i_clock li { list-style: none; position: absolute; z-index: 3; font: 6px/7px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #000;}

.i_clock li:nth-child(1) { left: 35px; top: 7px }
.i_clock li:nth-child(2) { left: 42px; top: 13px }
.i_clock li:nth-child(3) { left: 45px; top: 23px }
.i_clock li:nth-child(4) { left: 42px; top: 33px }
.i_clock li:nth-child(5) { left: 35px; top: 41px }
.i_clock li:nth-child(6) { left: 26px; top: 43px }
.i_clock li:nth-child(7) { left: 17px; top: 41px }
.i_clock li:nth-child(8) { left: 9px; top: 33px }
.i_clock li:nth-child(9) { left: 8px; top: 23px }
.i_clock li:nth-child(10) { left: 10px; top: 13px }
.i_clock li:nth-child(11) { left: 16px; top: 7px }
.i_clock li:nth-child(12) { left: 23px; top: 5px }


/* ---------------------------------------------------------------------------- */
.i_notes {
	background: linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% );
	background: -webkit-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% );
	background: -moz-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% );
	background: -o-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% );
}

.i_notes:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: #d3d699;
	top: 23px;
	left: 0;
	border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	-webkit-border-radius: 0 0 2px 2px;
	box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0;
	-moz-box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0;
	-webkit-box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0;
}

.i_notes:before {
	content: '';
	position: absolute;
	height: 40px;
	width: 1px;
	border-left: 1px solid #d9c884;
	border-right: 1px solid #d9c884;
	top: 17px;
	left: 10px;
	z-index: 3;
}


/* ---------------------------------------------------------------------------- */
.i_reminders {
	background: #1f1f1f;
	box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px;
	-moz-box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px;
	-webkit-box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px;
}

.i_reminders:after {
	content: '';
	position: absolute;
	display: block;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #eeeeee;
	top: 5px;
	left: 5px;
	width: 46px;
	height: 46px;
	z-index: 1;
	box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0;
	-moz-box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0;
	-webkit-box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0;
}

.i_reminders div {
	position: relative;
	width: 36px;
	text-align: left;
	padding: 0 5px;
	top: 5px;
	left: 5px;
	height: 16px !important;
	font: 9px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	z-index: 2;
	box-shadow:  inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0;
	-moz-box-shadow:  inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0;
	-webkit-box-shadow:  inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0;
	color: #3b3b3b;
	text-shadow: rgba(255,255,255,1) 0 1px 0;
}

.i_reminders div:last-child {
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	box-shadow: none;
	line-height: 13px;
}

.i_reminders div:last-child:after {
	content: '';
	width: 1px;
	height: 46px;
	left: 17px;
	box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0;
	-moz-box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0;
	-webkit-box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0;
	z-index: 2;
	position: absolute;
	top: -32px;
}

.i_reminders div:before {
	content: '';
	position: absolute;
	background: #b1b1b1;
	height: 3px;
	width: 17px;
	left: 23px;
	top: 7px;
	box-shadow: rgba(255,255,255,1) 0 1px 1px;
	-moz-box-shadow: rgba(255,255,255,1) 0 1px 1px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 1px 1px;
}

.i_reminders div:nth-child(2):before { width: 13px; top: 6px; }
.i_reminders div:nth-child(3):before { top: 5px }


/* ---------------------------------------------------------------------------- */
.i_mail {
	background: linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8);
}

.i_mail:before{
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	display: block;
	border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	background: rgba(255,255,255,0.2);
	z-index: 1;
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_mail .mail {
	width: 38px;
	height: 23px;
	position: absolute;
	display: block;
	z-index: 1;
	left: 9px;
	top: 16px;
	background: linear-gradient(top, #f8f8f9, #e6e8ec);
	background: -webkit-linear-gradient(top, #f8f8f9, #e6e8ec);
	background: -moz-linear-gradient(top, #f8f8f9, #e6e8ec);
	background: -o-linear-gradient(top, #f8f8f9, #e6e8ec);
	box-shadow: rgba(0,0,0,0.2) 0 1px 1px;
	-moz-box-shadow: rgba(0,0,0,0.2) 0 1px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 1px;
	overflow: hidden;
}

.i_mail .mail .mail_top {
	position: absolute;
	width: 28px;
	height: 28px;
	left: 13%;
	top: -17px;
	background: #fcfcfc;
	box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	-moz-box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	-webkit-box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	transform: rotate(-36deg) skew(20deg);
	-webkit-transform: rotate(-36deg) skew(20deg);
	-moz-transform: rotate(-36deg) skew(20deg);
	-o-transform: rotate(-36deg) skew(20deg);
	z-index: 50000;
}

.i_mail .mail .mail_top:before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	left: 0;
	bottom: 0;
	box-shadow: rgba(0,0,0,0.2) -1px 1px 1px;
	-moz-box-shadow: rgba(0,0,0,0.2) -1px 1px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.2) -1px 1px 1px;
	transform: rotate(-4deg) skew(-8deg);
	-webkit-transform: rotate(-4deg) skew(-8deg);
	-moz-transform: rotate(-4deg) skew(-8deg);
	-o-transform: rotate(-4deg) skew(-8deg);
}

.i_mail .mail .mail_bottom {
	position: absolute;
	width: 28px;
	height: 28px;
	left: 17%;
	top: 13px;
	box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	-moz-box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	-webkit-box-shadow: rgba(0,0,0,0.9) 0 0 1px;
	transform: rotate(-34deg) skew(20deg);
	-webkit-transform: rotate(-34deg) skew(20deg);
	-moz-transform: rotate(-34deg) skew(20deg);
	-o-transform: rotate(-34deg) skew(20deg);
	z-index: 4;
}

.i_mail .clouds, .i_mail .clouds2 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 11px;
	top: 1px;
	transform: scaleX(1.3) rotate(10deg);
	-webkit-transform: scaleX(1.3) rotate(10deg);
	-moz-transform: scaleX(1.3) rotate(10deg);
	-o-transform: scaleX(1.3) rotate(10deg);
}

.i_mail .clouds2 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 5px;
	top: 30px;
	transform: scaleX(1.3) rotate(190deg);
	-webkit-transform: scaleX(1.3) rotate(190deg);
	-moz-transform: scaleX(1.3) rotate(190deg);
	-o-transform: scaleX(1.3) rotate(190deg);
}

.i_mail .clouds b, .i_mail .clouds2 b {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 5px;
	display: block;
	height: 5px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.5)));
	background-image: -webkit-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00));
	background-image: -moz-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00));
	background-image: -o-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00));
	background-image: radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00));
}

.i_mail .clouds b:nth-child(1), .i_mail .clouds2 b:nth-child(1) { bottom: 10px; left: 20px}
.i_mail .clouds b:nth-child(2), .i_mail .clouds2 b:nth-child(2) { bottom: 9px; left: 16px}
.i_mail .clouds b:nth-child(3), .i_mail .clouds2 b:nth-child(3) { bottom: 8px; left: 11px}
.i_mail .clouds b:nth-child(4), .i_mail .clouds2 b:nth-child(4) { bottom: 6px; left: 14px}
.i_mail .clouds b:nth-child(5), .i_mail .clouds2 b:nth-child(5) { bottom: 5px; left: 8px}
.i_mail .clouds b:nth-child(6), .i_mail .clouds2 b:nth-child(6) { bottom: 3px; left: 5px}
.i_mail .clouds b:nth-child(7), .i_mail .clouds2 b:nth-child(7) { bottom: 7px; left: 4px}
.i_mail .clouds b:nth-child(8), .i_mail .clouds2 b:nth-child(8) { bottom: 4px; left: 12px}
.i_mail .clouds b:nth-child(9), .i_mail .clouds2 b:nth-child(9) { bottom: 4px; left: 16px}
.i_mail .clouds b:nth-child(10), .i_mail .clouds2 b:nth-child(10) { bottom: 4px; left: 4px}

.i_mail .clouds b:nth-child(11), .i_mail .clouds2 b:nth-child(11) { bottom: 2px; left: 2px}
.i_mail .clouds b:nth-child(12), .i_mail .clouds2 b:nth-child(12) { bottom: 4px; left: 3px}
.i_mail .clouds b:nth-child(13), .i_mail .clouds2 b:nth-child(13) { bottom: 0px; left: 4px}
.i_mail .clouds b:nth-child(14), .i_mail .clouds2 b:nth-child(14) { bottom: 0px; left: 8px}
.i_mail .clouds b:nth-child(15), .i_mail .clouds2 b:nth-child(15) { bottom: 0px; left: 12px}
.i_mail .clouds b:nth-child(16), .i_mail .clouds2 b:nth-child(16) { bottom: 0px; left: 15px}
.i_mail .clouds b:nth-child(17), .i_mail .clouds2 b:nth-child(17) { bottom: 0px; left: 18px}
.i_mail .clouds b:nth-child(18), .i_mail .clouds2 b:nth-child(18) { bottom: 4px; left: 19px}
.i_mail .clouds b:nth-child(19), .i_mail .clouds2 b:nth-child(19) { bottom: 4px; left: 16px}
.i_mail .clouds b:nth-child(20), .i_mail .clouds2 b:nth-child(20) { bottom: 4px; left: 22px}

.i_mail .clouds b:nth-child(21), .i_mail .clouds2 b:nth-child(21) { bottom: 0px; left: 24px}
.i_mail .clouds b:nth-child(22), .i_mail .clouds2 b:nth-child(22) { bottom: 2px; left: 22px}
.i_mail .clouds b:nth-child(23), .i_mail .clouds2 b:nth-child(23) { bottom: 5px; left: 15px}
.i_mail .clouds b:nth-child(24), .i_mail .clouds2 b:nth-child(24) { bottom: 8px; left: 4px}
.i_mail .clouds b:nth-child(25), .i_mail .clouds2 b:nth-child(25) { bottom: 0px; left: 8px}
.i_mail .clouds b:nth-child(26), .i_mail .clouds2 b:nth-child(26) { bottom: 0px; left: 5px}
.i_mail .clouds b:nth-child(27), .i_mail .clouds2 b:nth-child(27) { bottom: 0px; left: 6px}
.i_mail .clouds b:nth-child(28), .i_mail .clouds2 b:nth-child(28) { bottom: 0px; left: 12px}
.i_mail .clouds b:nth-child(29), .i_mail .clouds2 b:nth-child(29) { bottom: 0px; left: 16px}
.i_mail .clouds b:nth-child(30), .i_mail .clouds2 b:nth-child(30) { bottom: 8px; left: 15px}


/* ---------------------------------------------------------------------------- */
.i_app_store {
	background: linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8);
	background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8);
}

.i_app_store:before{
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	display: block;
	border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
	background: rgba(255,255,255,0.2);
	z-index: 1;
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_app_store:after{
	content: '';
	width: 38px;
	height: 38px;
	position: absolute;
	display: block;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	z-index: 1;
	left: 9px;
	top: 9px;
	box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px;
	-moz-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px;
	-webkit-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px;
}

.i_app_store .kirpich {
	position: absolute;
	width: 22px;
	left: 17px;
	top: 27px;
	height: 3px;
	box-shadow: rgba(0,0,0,0.5) 0 0 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 0 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 0 1px;
	background: #fff;
	z-index: 5;
}

.i_app_store .kirpich .pen1 {
	position: absolute;
	width: 15px;
	left: -1px;
	top: 0px;
	height: 2px;
	background: #fff;
	z-index: 5;
	transform: rotate(-65deg);
	-webkit-transform: rotate(-65deg);
	-moz-transform: rotate(-65deg);
	-o-transform: rotate(-65deg);
	border-radius: 0 2px 2px 0;
	-moz-border-radius: 0 2px 2px 0;
	-webkit-border-radius: 0 2px 2px 0;
	box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
}

.i_app_store .kirpich .pen1:after {
	position: absolute;
	content: '';
	left: -24%;
	top: 0;
	width: 0;
	height: 0;
	border-top: 1px solid transparent;
	border-right: 3px solid #fff;
	border-bottom: 1px solid transparent;
	z-index: 0;
}

.i_app_store .kirpich .pen1:before {
	position: absolute;
	content: '';
	right: 14%;
	top: 0;
	width: 2px;
	height: 100%;
	box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
}

.i_app_store .kirpich .pen2 {
	position: absolute;
	width: 22px;
	right: -5px;
	top: 0px;
	height: 2px;
	box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	background: #fff;
	z-index: 5;
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.i_app_store .kirpich .pen2:after {
	position: absolute;
	content: '';
	right: -9%;
	top: -1px;
	width: 0px;
	height: 2px;
	border-right: 6px solid #fff;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	z-index: 0;
	box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
}

.i_app_store .kirpich .pen2:before {
	position: absolute;
	content: '';
	right: 14%;
	top: 0;
	width: 2px;
	height: 100%;
	box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
	-webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px,  #2353d9 0 0 1px, #2353d9 0 0 1px;
}

.i_app_store .glow {
	position: absolute;
	top: 20px;
	width: 100%;
	left: 0;
}

.i_app_store .glow hr {
	background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% );
	background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% );
	background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% );
	background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% );
	border: none;
	position: absolute;
	height: 1px;
	width: 100%;
	left: 0;
	top: 0;
	display: block;
}

.i_app_store .glow hr:nth-child(1) { transform: rotate(0deg) scale(1.5); -webkit-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); opacity: 0;}
.i_app_store .glow hr:nth-child(2) { transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); }
.i_app_store .glow hr:nth-child(3) { transform: rotate(10deg) scale(1.5); -webkit-transform: rotate(10deg) scale(1.5); -moz-transform: rotate(10deg) scale(1.5); -o-transform: rotate(10deg) scale(1.5);}
.i_app_store .glow hr:nth-child(4) { transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg);}
.i_app_store .glow hr:nth-child(5) { transform: rotate(20deg) scale(1.5); -webkit-transform: rotate(20deg) scale(1.5); -moz-transform: rotate(20deg) scale(1.5); -o-transform: rotate(20deg) scale(1.5);}
.i_app_store .glow hr:nth-child(6) { transform: rotate(25deg) scale(1.1); -webkit-transform: rotate(25deg) scale(1.1); -moz-transform: rotate(25deg) scale(1.1); -o-transform: rotate(25deg) scale(1.1);}
.i_app_store .glow hr:nth-child(7) { transform: rotate(30deg) scale(1.5); -webkit-transform: rotate(30deg) scale(1.5); -moz-transform: rotate(30deg) scale(1.5); -o-transform: rotate(30deg) scale(1.5);}
.i_app_store .glow hr:nth-child(8) { transform: rotate(35deg) scale(1.2); -webkit-transform: rotate(35deg) scale(1.2); -moz-transform: rotate(35deg) scale(1.2); -o-transform: rotate(35deg) scale(1.2);}
.i_app_store .glow hr:nth-child(9) { transform: rotate(40deg) scale(1.5); -webkit-transform: rotate(40deg) scale(1.5); -moz-transform: rotate(40deg) scale(1.5); -o-transform: rotate(40deg) scale(1.5);}
.i_app_store .glow hr:nth-child(10) { transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); -moz-transform: rotate(45deg) scale(1.3); -o-transform: rotate(45deg) scale(1.3);}
.i_app_store .glow hr:nth-child(11) { transform: rotate(50deg) scale(1.5); -webkit-transform: rotate(50deg) scale(1.5); -moz-transform: rotate(50deg) scale(1.5); -o-transform: rotate(50deg) scale(1.5);}
.i_app_store .glow hr:nth-child(12) { transform: rotate(55deg) scale(1.4); -webkit-transform: rotate(55deg) scale(1.4); -moz-transform: rotate(55deg) scale(1.4); -o-transform: rotate(55deg) scale(1.4);}
.i_app_store .glow hr:nth-child(13) { transform: rotate(60deg) scale(1.5); -webkit-transform: rotate(60deg) scale(1.5); -moz-transform: rotate(60deg) scale(1.5); -o-transform: rotate(60deg) scale(1.5);}
.i_app_store .glow hr:nth-child(14) { transform: rotate(65deg) scale(1.3); -webkit-transform: rotate(65deg) scale(1.3); -moz-transform: rotate(65deg) scale(1.3); -o-transform: rotate(65deg) scale(1.3);}
.i_app_store .glow hr:nth-child(15) { transform: rotate(70deg) scale(1.5); -webkit-transform: rotate(70deg) scale(1.5); -moz-transform: rotate(70deg) scale(1.5); -o-transform: rotate(70deg) scale(1.5);}
.i_app_store .glow hr:nth-child(16) { transform: rotate(75deg) scale(1.1); -webkit-transform: rotate(75deg) scale(1.1); -moz-transform: rotate(75deg) scale(1.1); -o-transform: rotate(75deg) scale(1.1);}
.i_app_store .glow hr:nth-child(17) { transform: rotate(80deg) scale(1.5); -webkit-transform: rotate(80deg) scale(1.5); -moz-transform: rotate(80deg) scale(1.5); -o-transform: rotate(80deg) scale(1.5);}
.i_app_store .glow hr:nth-child(18) { transform: rotate(85deg) scale(1.1); -webkit-transform: rotate(85deg) scale(1.1); -moz-transform: rotate(85deg) scale(1.1); -o-transform: rotate(85deg) scale(1.1);}
.i_app_store .glow hr:nth-child(19) { transform: rotate(90deg) scale(1.5); -webkit-transform: rotate(90deg) scale(1.5); -moz-transform: rotate(90deg) scale(1.5); -o-transform: rotate(90deg) scale(1.5);}
.i_app_store .glow hr:nth-child(20) { transform: rotate(95deg); -webkit-transform: rotate(95deg); -moz-transform: rotate(95deg); -o-transform: rotate(95deg);}

.i_app_store .glow hr:nth-child(21) { transform: rotate(100deg) scale(1.5); -webkit-transform: rotate(100deg) scale(1.5); -moz-transform: rotate(100deg) scale(1.5); -o-transform: rotate(100deg) scale(1.5);}
.i_app_store .glow hr:nth-child(22) { transform: rotate(105deg) scale(1.1); -webkit-transform: rotate(105deg) scale(1.1); -moz-transform: rotate(105deg) scale(1.1); -o-transform: rotate(105deg) scale(1.1);}
.i_app_store .glow hr:nth-child(23) { transform: rotate(110deg) scale(1.5); -webkit-transform: rotate(110deg) scale(1.5); -moz-transform: rotate(110deg) scale(1.5); -o-transform: rotate(110deg) scale(1.5);}
.i_app_store .glow hr:nth-child(24) { transform: rotate(115deg) scale(1.2); -webkit-transform: rotate(115deg) scale(1.2); -moz-transform: rotate(115deg) scale(1.2); -o-transform: rotate(115deg) scale(1.2);}
.i_app_store .glow hr:nth-child(25) { transform: rotate(120deg) scale(1.5); -webkit-transform: rotate(120deg) scale(1.5); -moz-transform: rotate(120deg) scale(1.5); -o-transform: rotate(120deg) scale(1.5);}
.i_app_store .glow hr:nth-child(26) { transform: rotate(125deg) scale(1.3); -webkit-transform: rotate(125deg) scale(1.3); -moz-transform: rotate(125deg) scale(1.3); -o-transform: rotate(125deg) scale(1.3);}
.i_app_store .glow hr:nth-child(27) { transform: rotate(130deg) scale(1.5); -webkit-transform: rotate(130deg) scale(1.5); -moz-transform: rotate(130deg) scale(1.5); -o-transform: rotate(130deg) scale(1.5);}
.i_app_store .glow hr:nth-child(28) { transform: rotate(135deg) scale(1.2); -webkit-transform: rotate(135deg) scale(1.2); -moz-transform: rotate(135deg) scale(1.2); -o-transform: rotate(135deg) scale(1.2);}
.i_app_store .glow hr:nth-child(29) { transform: rotate(140deg) scale(1.5); -webkit-transform: rotate(140deg) scale(1.5); -moz-transform: rotate(140deg) scale(1.5); -o-transform: rotate(140deg) scale(1.5);}
.i_app_store .glow hr:nth-child(30) { transform: rotate(145deg) scale(1.1); -webkit-transform: rotate(145deg) scale(1.1); -moz-transform: rotate(145deg) scale(1.1); -o-transform: rotate(145deg) scale(1.1);}
.i_app_store .glow hr:nth-child(31) { transform: rotate(150deg) scale(1.5); -webkit-transform: rotate(150deg) scale(1.5); -moz-transform: rotate(150deg) scale(1.5); -o-transform: rotate(150deg) scale(1.5);}
.i_app_store .glow hr:nth-child(32) { transform: rotate(155deg) scale(1.1); -webkit-transform: rotate(155deg) scale(1.1); -moz-transform: rotate(155deg) scale(1.1); -o-transform: rotate(155deg) scale(1.1);}
.i_app_store .glow hr:nth-child(33) { transform: rotate(160deg) scale(1.5); -webkit-transform: rotate(160deg) scale(1.5); -moz-transform: rotate(160deg) scale(1.5); -o-transform: rotate(160deg) scale(1.5);}
.i_app_store .glow hr:nth-child(34) { transform: rotate(165deg) scale(1.2); -webkit-transform: rotate(165deg) scale(1.2); -moz-transform: rotate(165deg) scale(1.2); -o-transform: rotate(165deg) scale(1.2);}
.i_app_store .glow hr:nth-child(35) { transform: rotate(170deg) scale(1.5); -webkit-transform: rotate(170deg) scale(1.5); -moz-transform: rotate(170deg) scale(1.5); -o-transform: rotate(170deg) scale(1.5);}
.i_app_store .glow hr:nth-child(36) { transform: rotate(175deg) scale(1.3); -webkit-transform: rotate(175deg) scale(1.3); -moz-transform: rotate(175deg) scale(1.3); -o-transform: rotate(175deg) scale(1.3);}
.i_app_store .glow hr:nth-child(37) { transform: rotate(180deg) scale(1.5); -webkit-transform: rotate(180deg) scale(1.5); -moz-transform: rotate(180deg) scale(1.5); -o-transform: rotate(180deg) scale(1.5);}
.i_app_store .glow hr:nth-child(38) { transform: rotate(185deg) scale(1.2); -webkit-transform: rotate(185deg) scale(1.2); -moz-transform: rotate(185deg) scale(1.2); -o-transform: rotate(185deg) scale(1.2);}

.i_app_store .glow hr:nth-child(2n+1) {
	background: linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% );
	background: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% );
	background: -moz-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% );
	background: -o-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% );
}

.i_app_store .glow hr:nth-child(2n+2) {
	background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% );
	background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% );
	background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% );
	background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% );
}


/* ---------------------------------------------------------------------------- */
.i_videos {
	background: linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%);
	background: -webkit-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%);
	background: -moz-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%);
	background: -o-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%);
}

.i_videos .top {
	position: absolute;
	height: 21px;
	border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
}

.i_videos .top:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(top, #514f4f, #3e3c3c);
	background: -webkit-linear-gradient(top, #514f4f, #3e3c3c);
	background: -moz-linear-gradient(top, #514f4f, #3e3c3c);
	background: -o-linear-gradient(top, #514f4f, #3e3c3c);
	border-radius: 10px 0 0 0;
	-moz-border-radius: 10px 0 0 0;
	-webkit-border-radius: 10px 0 0 0;
	box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0,  inset rgba(255,255,255,0.8) 0 0 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0,  inset rgba(255,255,255,0.8) 0 0 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0,  inset rgba(255,255,255,0.8) 0 0 1px;
}

.i_videos .top:before {
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	top: 42%;
	left: 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	z-index: 2;
	background: #fff;
	box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px;
}

.i_videos .top .hr1, .i_videos .top .hr2 {
	position: absolute;
	top: 0;
	left: 15px;
	background: linear-gradient(top, #e3e2e2, #aeaeae);
	background: -webkit-linear-gradient(top, #e3e2e2, #aeaeae);
	background: -moz-linear-gradient(top, #e3e2e2, #aeaeae);
	background: -o-linear-gradient(top, #e3e2e2, #aeaeae);
	height: 10px;
	width: 11px;
	transform: skew(45deg);
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	-o-transform: skew(45deg);
	box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	border: none;
	margin: 0;
	padding: 0;
	z-index: 6;
}

.i_videos .top .hr2 {
	left: 36px
}

.i_videos .top .hr3, .i_videos .top .hr4, .i_videos .top .hr5 {
	position: absolute;
	top: 10px;
	left: 15px;
	background: linear-gradient(top, #e3e2e2, #aeaeae);
	background: -webkit-linear-gradient(top, #e3e2e2, #aeaeae);
	background: -moz-linear-gradient(top, #e3e2e2, #aeaeae);
	background: -o-linear-gradient(top, #e3e2e2, #aeaeae);
	height: 10px;
	width: 11px;
	transform: skew(-45deg);
	-webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	-o-transform: skew(-45deg);
	box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px;
	border: none;
	margin: 0;
	padding: 0;
}

.i_videos .top .hr4 { left: 36px }
.i_videos .top .hr5 { left: 57px }

.i_videos .top .hack {
	position: absolute;
	top: 3px;
	left: 6px;
	background: linear-gradient(top, #232323, #000);
	background: -webkit-linear-gradient(top, #232323, #000);
	background: -moz-linear-gradient(top, #232323, #000);
	background: -o-linear-gradient(top, #232323, #000);
	height: 7px;
	width: 10px;
	transform: skew(45deg);
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	-o-transform: skew(45deg);
	box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px;
	border: none;
	margin: 0;
	padding: 0;
	z-index: 5;
	box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ;
}
.i_videos .top .hack:after {
	content: '';
	position: absolute;
	top: -3px;
	left: 2px;
	background: linear-gradient(top, #2e2e2e, #232323);
	background: -webkit-linear-gradient(top, #2e2e2e, #232323);
	background: -moz-linear-gradient(top, #2e2e2e, #232323);
	background: -o-linear-gradient(top, #2e2e2e, #232323);
	height: 3px;
	width: 8px;
	transform: skew(-45deg);
	-webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	-o-transform: skew(-45deg);
	border: none;
	margin: 0;
	padding: 0;
	z-index: 5;
	border-radius: 7px 0 0 0/ 3px 0 0 0;
	-moz-border-radius: 7px 0 0 0/ 3px 0 0 0;
	-webkit-border-radius: 7px 0 0 0/ 3px 0 0 0;
}

.i_videos .bottom {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	height: 35px;
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	overflow: hidden;
	background: linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
}

.i_videos .bottom b {
	position:absolute;
	box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px;
	-moz-box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px;
	-webkit-box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px;
}

.i_videos .bottom .c1{
	left: 45px;
	top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.i_videos .bottom .c2{
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	width: 35px;
	height: 35px;
	left: 23px;
	top: -15px;
	opacity: 0.5;
}

.i_videos .bottom .c3{
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	width: 35px;
	height: 35px;
	left: -17px;
	top: 10px;
}

.i_videos .bottom .c4 {
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	width: 45px;
	height: 45px;
	left: -20px;
	top: -2px;
}


/* ---------------------------------------------------------------------------- */
.i_youtube {
	background: linear-gradient(top, #74502d, #936e4e);
	background: -webkit-linear-gradient(top, #74502d, #936e4e);
	background: -moz-linear-gradient(top, #74502d, #936e4e);
	background: -o-linear-gradient(top, #74502d, #936e4e);
	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_youtube:after {
	content: '';
	width: 50px;
	height: 50px;
	position: absolute;
	left: 3px;
	top: 3px;
	background: linear-gradient(top, #cab274, #faf0d2);
	background: -webkit-linear-gradient(top, #cab274, #faf0d2);
	background: -moz-linear-gradient(top, #cab274, #faf0d2);
	background: -o-linear-gradient(top, #cab274, #faf0d2);
	box-shadow: inset #453e28 0 1px 2px;
	-moz-box-shadow: inset #453e28 0 1px 2px;
	-webkit-box-shadow: inset #453e28 0 1px 2px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.i_youtube .screen {
	position: absolute;
	left: 6px;
	top: 6px;
	width: 42px;
	height: 35px;
	background: linear-gradient(top, #6d7460 30%, #97a482);
	background: -webkit-linear-gradient(top, #6d7460 30%, #97a482);
	background: -moz-linear-gradient(top, #6d7460 30%, #97a482);
	background: -o-linear-gradient(top, #6d7460 30%, #97a482);
	z-index: 3;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border: 1px #464c43 solid;
	box-shadow: inset #89986f 0 -2px 2px;
	-moz-box-shadow: inset #89986f 0 -2px 2px;
	-webkit-box-shadow: inset #89986f 0 -2px 2px;
}

.i_youtube .screen:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(top, #d5d9d2, #a0a796);
	background: -webkit-linear-gradient(top, #d5d9d2, #a0a796);
	background: -moz-linear-gradient(top, #d5d9d2, #a0a796);
	background: -o-linear-gradient(top, #d5d9d2, #a0a796);
	border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px;
	-moz-border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px;
	-webkit-border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px;
	box-shadow: inset #fff 0 1px 1px;
	-moz-box-shadow: inset #fff 0 1px 1px;
	-webkit-box-shadow: inset #fff 0 1px 1px;
}

.i_youtube sub, .i_youtube sup {
	position: absolute;
	left: 7px;
	top: 43px;
	width: 9px;
	height: 9px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	background: #383433;
	z-index: 4;
	box-shadow: inset #000 0 -1px 0;
	-moz-box-shadow: inset #000 0 -1px 0;
	-webkit-box-shadow: inset #000 0 -1px 0;
}

.i_youtube sub:before, .i_youtube sup:before {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	left: 2px;
	top: 2px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	background: #947153;
}

.i_youtube sub:after, .i_youtube sup:after {
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	left: 3px;
	top: 3px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	background: #6a6969;
	box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0;
	-moz-box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0;
	-webkit-box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_youtube sup {
	right: 7px;
	left: auto;
}

.i_youtube hr {
	position: absolute;
	display: block;
	width: 1px;
	height: 3px;
	left: 49%;
	top: 40px;
	background: #000;
	border: 0;
	box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px;
	-moz-box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px;
	-webkit-box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px;
	z-index: 5;
}

.i_youtube hr:after {
	content: '';
	position: absolute;
	display: block;
	width: 7px;
	height: 80%;
	left: -4px;
	top: -1px;
	border-left: 1px #000 solid;
	border-right: 1px #000 solid;
}

.i_youtube hr:before {
	content: '';
	position: absolute;
	display: block;
	width: 11px;
	height: 1px;
	left: -6px;
	top: -20%;
	border-left: 1px #000 solid;
	border-right: 1px #000 solid;
}


/* ---------------------------------------------------------------------------- */
.i_calculator {
	background: linear-gradient(top, #c6bcb5, #39302a);
	background: -webkit-linear-gradient(top, #c6bcb5, #39302a);
	background: -moz-linear-gradient(top, #c6bcb5, #39302a);
	background: -o-linear-gradient(top, #c6bcb5, #39302a);
}

.i_calculator .plus {
	position: absolute;
	width: 28px;
	height: 28px;
	left: 0;
	top: 0;
	box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px;
}

.i_calculator .plus b {
	display: block;
	width: 12px;
	height: 2px;
	background: #fff;
	position: absolute;
	left: 8px;
	top: 14px;
	box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
}

.i_calculator .plus b:before {
	content: '';
	position: absolute;
	height: 12px;
	width: 2px;
	background: #fff;
	left: 5px;
	top: -5px;
	box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	z-index: 1;
}

.i_calculator .plus b:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 2px;
	left: 0;
	top: 0;
	background: #fff;
	z-index: 3;
}

.i_calculator .minus {
	position: absolute;
	width: 29px;
	height: 28px;
	right: 0;
	top: 0;
	box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px;
}

.i_calculator .minus b {
	display: block;
	width: 13px;
	height: 2px;
	background: #fff;
	position: absolute;
	left: 8px;
	top: 14px;
	box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
}

.i_calculator .multiply {
	position: absolute;
	width: 28px;
	height: 29px;
	left: 0;
	top: 27px;
	box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px;
	-moz-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px;
	-webkit-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px;
}

.i_calculator .multiply b {
	display: block;
	width: 12px;
	height: 2px;
	background: #fff;
	position: absolute;
	left: 8px;
	top: 14px;
	box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.i_calculator .multiply b:before {
	content: '';
	position: absolute;
	height: 12px;
	width: 2px;
	background: #fff;
	left: 5px;
	top: -5px;
	box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0;
	z-index: 1;
}

.i_calculator .multiply b:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 2px;
	left: 0;
	top: 0;
	background: #fff;
	z-index: 3;
}

.i_calculator .result {
	position: absolute;
	width: 28px;
	height: 28px;
	right: 0;
	top: 28px;
	box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0;
	background: linear-gradient(top, #ed8628, #9b420e);
	background: -webkit-linear-gradient(top, #ed8.........完整代码请登录后点击上方下载按钮下载查看
h5模仿iphone4经典滑动解锁效果

网友评论0

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码

css实现div丁字形布局代码
