@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
.container {
  width: 400px;
  height: 600px;
  position: relative;
  margin: 40px auto 100px auto;
  -webkit-perspective: 1600px;
  -moz-perspective: 1600px;
  -ms-perspective: 1600px;
  -o-perspective: 1600px;
  perspective: 1600px;
}

.ipad {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.ipad > div {
  position: absolute;
  display: table;
}

.ipad .front {
  border-style: solid;
  border-width: 40px 30.07519px 60px;
  border-color: white;
  display: block;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0e3479), color-stop(100%, #d0e3e2));
  background-image: -webkit-linear-gradient(#0e3479, #d0e3e2);
  background-image: -moz-linear-gradient(#0e3479, #d0e3e2);
  background-image: -o-linear-gradient(#0e3479, #d0e3e2);
  background-image: linear-gradient(#0e3479, #d0e3e2);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 0 2px #e0dfe3;
  -moz-box-shadow: 0px 0px 0 2px #e0dfe3;
  box-shadow: 0px 0px 0 2px #e0dfe3;
}

.ipad .back {
  background: #f4f4f4;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.ipad .behind-front {
  width: 400px;
  height: 600px;
  background: #e0dfe3;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-transform: translateZ(9.23077px);
  -moz-transform: translateZ(9.23077px);
  -ms-transform: translateZ(9.23077px);
  -o-transform: translateZ(9.23077px);
  transform: translateZ(9.23077px);
}

.ipad .behind-back {
  width: 361.99095px;
  height: 555.55556px;
  margin-top: 22.22222px;
  margin-left: 19.04762px;
  background: #e0dfe3;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-transform: translateZ(-9.23077px);
  -moz-transform: translateZ(-9.23077px);
  -ms-transform: translateZ(-9.23077px);
  -o-transform: translateZ(-9.23077px);
  transform: translateZ(-9.23077px);
}

.ipad .top,
.ipad .bottom {
  background: #e0dfe3;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  -ms-border-radius: 20px 20px 0 0;
  -o-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}

.ipad .right,
.ipad .left {
  background: #e0dfe3;
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  -ms-border-radius: 20px 0 0 20px;
  -o-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px;
}

.ipad .front {
  width: 400px;
  height: 600px;
}

.ipad .back {
  width: 361.99095px;
  height: 555.55556px;
}

.ipad .right,
.ipad .left {
  width: 26.66667px;
  height: 555.55556px;
}

.ipad .top,
.ipad .bottom {
  width: 372.78658px;
  height: 30.15075px;
}

.ipad .back {
  margin-top: 22.22222px;
  margin-left: 19.04762px;
}

.ipad .right,
.ipad .left {
  margin-top: 20px;
  left: 186.04651px;
}

.ipad .top,
.ipad .bottom {
  top: 281.69014px;
  margin-left: 13.33333px;
}

.ipad .front {
  -webkit-transform: translateZ(10px);
  -moz-transform: translateZ(10px);
  -ms-transform: translateZ(10px);
  -o-transform: translateZ(10px);
  transform: translateZ(10px);
}

.ipad .back {
  -webkit-transform: rotateX(-180deg) translateZ(10.90909px);
  -moz-transform: rotateX(-180deg) translateZ(10.90909px);
  -ms-transform: rotateX(-180deg) translateZ(10.90909px);
  -o-transform: rotateX(-180deg) translateZ(10.90909px);
  transform: rotateX(-180deg) translateZ(10.90909px);
}

.ipad .right {
  -webkit-transform: rotateY(90deg) translateZ(189.1253px) rotateY(-130deg);
  -moz-transform: rotateY(90deg) translateZ(189.1253px) rotateY(-130deg);
  -ms-transform: rotateY(90deg) translateZ(189.1253px) rotateY(-130deg);
  -o-transform: rotateY(90deg) translateZ(189.1253px) rotateY(-130deg);
  transform: rotateY(90deg) translateZ(189.1253px) rotateY(-130deg);
}

.ipad .left {
  -webkit-transform: rotateY(-90deg) translateZ(188.67925px) rotateY(310deg);
  -moz-transform: rotateY(-90deg) translateZ(188.67925px) rotateY(310deg);
  -ms-transform: rotateY(-90deg) translateZ(188.67925px) rotateY(310deg);
  -o-transform: rotateY(-90deg) translateZ(188.67925px) rotateY(310deg);
  transform: rotateY(-90deg) translateZ(188.67925px) rotateY(310deg);
}

.ipad .top {
  -webkit-transform: rotateX(90deg) translateZ(282.08745px) rotateX(55deg);
  -moz-transform: rotateX(90deg) translateZ(282.08745px) rotateX(55deg);
  -ms-transform: rotateX(90deg) translateZ(282.08745px) rotateX(55deg);
  -o-transform: rotateX(90deg) translateZ(282.08745px) rotateX(55deg);
  transform: rotateX(90deg) translateZ(282.08745px) rotateX(55deg);
}

.ipad .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(289.85507px) rotateX(-235deg);
  -moz-transform: rotateX(-90deg) translateZ(289.85507px) rotateX(-235deg);
  -ms-transform: rotateX(-90deg) translateZ(289.85507px) rotateX(-235deg);
  -o-transform: rotateX(-90deg) translateZ(289.85507px) rotateX(-235deg);
  transform: rotateX(-90deg) translateZ(289.85507px) rotateX(-235deg);
}

#nav-1:checked ~ .container .ipad {
  -webkit-transform: translateZ(-300px) rotateX(75deg) rotateY(-350deg);
  -moz-transform: translateZ(-300px) rotateX(75deg) rotateY(-350deg);
  -ms-transform: translateZ(-300px) rotateX(75deg) rotateY(-350deg);
  -o-transform: translateZ(-300px) rotateX(75deg) rotateY(-350deg);
  transform: translateZ(-300px) rotateX(75deg) rotateY(-350deg);
}

#nav-2:checked ~ .container .ipad {
  -webkit-transform: translateZ(-600px) rotateX(90deg);
  -moz-transform: translateZ(-600px) rotateX(90deg);
  -ms-transform: translateZ(-600px) rotateX(90deg);
  -o-transform: translateZ(-600px) rotateX(90deg);
  transform: translateZ(-600px) rotateX(90deg);
}

#nav-3:checked ~ .container .ipad {
  -webkit-transform: translateZ(300px) rotateX(80deg) rotateY(0deg) rotateZ(90deg);
  -moz-transform: translateZ(300px) rotateX(80deg) rotateY(0deg) rotateZ(90deg);
  -ms-transform: translateZ(300px) rotateX(80deg) rotateY(0deg) rotateZ(90deg);
  -o-transform: translateZ(300px) rotateX(80deg) rotateY(0deg) rotateZ(90deg);
  transform: translateZ(300px) rotateX(80deg) rotateY(0deg) rotateZ(90deg);
}

#nav-4:checked ~ .container .ipad {
  -webkit-transform: translateZ(-300px) rotateX(83deg) rotateY(0deg) rotateZ(-397deg);
  -moz-transform: translateZ(-300px) rotateX(83deg) rotateY(0deg) rotateZ(-397deg);
  -ms-transform: translateZ(-300px) rotateX(83deg) rotateY(0deg) rotateZ(-397deg);
  -o-transform: translateZ(-300px) rotateX(83deg) rotateY(0deg) rotateZ(-397deg);
  transform: translateZ(-300px) rotateX(83deg) rotateY(0deg) rotateZ(-397deg);
}

#nav-5:checked ~ .container .ipad {
  -webkit-transform: translateZ(-300px) rotateX(70deg) rotateY(157deg);
  -moz-transform: translateZ(-300px) rotateX(70deg) rotateY(157deg);
  -ms-transform: translateZ(-300px) rotateX(70deg) rotateY(157deg);
  -o-transform: translateZ(-300px) rotateX(70deg) rotateY(157deg);
  transform: translateZ(-300px) rotateX(70deg) rotateY(157deg);
}

#nav-6:checked ~ .container .ipad {
  -webkit-transform: translateZ(-200px) rotateY(90deg) rotateX(0);
  -moz-transform: translateZ(-200px) rotateY(90deg) rotateX(0);
  -ms-transform: translateZ(-200px) rotateY(90deg) rotateX(0);
  -o-transform: translateZ(-200px) rotateY(90deg) rotateX(0);
  transform: translateZ(-200px) rotateY(90deg) rotateX(0);
}

#nav-7:checked ~ .container .ipad {
  -webkit-transform: translateZ(-300px) rotateX(75deg) rotateY(-10deg);
  -moz-transform: translateZ(-300px) rotateX(75deg) rotateY(-10deg);
  -ms-transform: translateZ(-300px) rotateX(75deg) rotateY(-10deg);
  -o-transform: translateZ(-300px) rotateX(75deg) rotateY(-10deg);
  transform: translateZ(-300px) rotateX(75deg) rotateY(-10deg);
}

input[id^="nav-"]:checked ~ .container .ipad:hover {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
}

.ipad:hover {
  -webkit-transform: translateZ(150px) rotateX(348deg) rotateY(190deg);
  -moz-transform: translateZ(150px) rotateX(348deg) rotateY(190deg);
  -ms-transform: translateZ(150px) rotateX(348deg) rotateY(190deg);
  -o-transform: translateZ(150px) rotateX(348deg) rotateY(190deg);
  transform: translateZ(150px) rotateX(348deg) rotateY(190deg);
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}

.ipad .right:before, .ipad .right:after,
.ipad .left:before,
.ipad .left:after,
.ipad .top:before,
.ipad .top:after,
.ipad .bottom:before,
.ipad .bottom:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: #e0dfe3;
}

.ipad .right:before, .left:before {
  top: -17.14286px;
  left: -6.66667px;
}
.ipad .right:after, .left:after {
  bottom: -24.2915px;
  left: -6.66667px;
}

.ipad .right:before {
  -webkit-border-radius: 100% 0 0 0;
  -moz-border-radius: 100% 0 0 0;
  -ms-border-radius: 100% 0 0 0;
  -o-border-radius: 100% 0 0 0;
  border-radius: 100% 0 0 0;
  -webkit-transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg) rotateX(0);
  -moz-transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg) rotateX(0);
  -ms-transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg) rotateX(0);
  -o-transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg) rotateX(0);
  transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg) rotateX(0);
}
.ipad .right:after {
  -webkit-border-radius: 0 100% 0 0;
  -moz-border-radius: 0 100% 0 0;
  -ms-border-radius: 0 100% 0 0;
  -o-border-radius: 0 100% 0 0;
  border-radius: 0 100% 0 0;
  -webkit-transform: rotateX(200deg) rotateY(230deg) rotateZ(0deg) rotateX(0deg);
  -moz-transform: rotateX(200deg) rotateY(230deg) rotateZ(0deg) rotateX(0deg);
  -ms-transform: rotateX(200deg) rotateY(230deg) rotateZ(0deg) rotateX(0deg);
  -o-transform: rotateX(200deg) rotateY(230deg) rotateZ(0deg) rotateX(0deg);
  transform: rotateX(200deg) rotateY(230deg) rotateZ(0deg) rotateX(0deg);
}

.ipad .left:before {
  -webkit-border-radius: 0 100% 0 0;
  -moz-border-radius: 0 100% 0 0;
  -ms-border-radius: 0 100% 0 0;
  -o-border-radius: 0 100% 0 0;
  border-radius: 0 100% 0 0;
  -webkit-transform: rotateX(15deg) rotateY(-130deg) rotateZ(0deg) rotateX(0);
  -moz-transform: rotateX(15deg) rotateY(-130deg) rotateZ(0deg) rotateX(0);
  -ms-transform: rotateX(15deg) rotateY(-130deg) rotateZ(0deg) rotateX(0);
  -o-transform: rotateX(15deg) rotateY(-130deg) rotateZ(0deg) rotateX(0);
  transform: rotateX(15deg) rotateY(-130deg) rotateZ(0deg) rotateX(0);
}
.ipad .left:after {
  -webkit-border-radius: 0 0 0 100%;
  -moz-border-radius: 0 0 0 100%;
  -ms-border-radius: 0 0 0 100%;
  -o-border-radius: 0 0 0 100%;
  border-radius: 0 0 0 100%;
  -webkit-transform: rotateX(20deg) rotateY(-50deg) rotateZ(0deg) rotateX(0deg);
  -moz-transform: rotateX(20deg) rotateY(-50deg) rotateZ(0deg) rotateX(0deg);
  -ms-transform: rotateX(20deg) rotateY(-50deg) rotateZ(0deg) rotateX(0deg);
  -o-transform: rotateX(20deg) rotateY(-50deg) rotateZ(0deg) rotateX(0deg);
  transform: rotateX(20deg) rotateY(-50deg) rotateZ(0deg) rotateX(0deg);
}

.ipad .top:before, .bottom:before {
  -webkit-border-radius: 0 100% 0 0;
  -moz-border-radius: 0 100% 0 0;
  -ms-border-radius: 0 100% 0 0;
  -o-border-radius: 0 100% 0 0;
  border-radius: 0 100% 0 0;
  bottom: -7.05882px;
  right: -11.11111px;
  -webkit-transform: rotateY(-20deg) rotateX(40deg) translateZ(3.75px);
  -moz-transform: rotateY(-20deg) rotateX(40deg) translateZ(3.75px);
  -ms-transform: rotateY(-20deg) rotateX(40deg) translateZ(3.75px);
  -o-transform: rotateY(-20deg) rotateX(40deg) translateZ(3.75px);
  transform: rotateY(-20deg) rotateX(40deg) translateZ(3.75px);
}
.ipad .top:after, .bottom:after {
  bottom: -7.05882px;
  left: -11.11111px;
  -webkit-border-radius: 0 0 0 100%;
  -moz-border-radius: 0 0 0 100%;
  -ms-border-radius: 0 0 0 100%;
  -o-border-radius: 0 0 0 100%;
  border-radius: 0 0 0 100%;
  -webkit-transform: rotateY(-20deg) rotateX(140deg) translateZ(3.75px);
  -moz-transform: rotateY(-20deg) rotateX(140deg) translateZ(3.75px);
  -ms-transform: rotateY(-20deg) rotateX(140deg) translateZ(3.75px);
  -o-transform: rotateY(-20deg) rotateX(140deg) translateZ(3.75px);
  transform: rotateY(-20deg) rotateX(140deg) translateZ(3.75px);
}

.front-top {
  font-size: 10px;
  color: white;
  text-align: left;
  margin-left: 6px;
  margin-top: 4px;
}
.front-top:before, .front-top:after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  width: 7%;
  left: 46.5%;
  height: 4px;
}
.front-top:before {
  top: 8px;
}
.front-top:after {
  bottom: 8px;
}
.front-top i {
  position: relative;
  top: -10px;
  font-style: normal;
}

.wifi {
  padding: 8px;
  position: relative;
  top: 1px;
  left: 4px;
}
.wifi:before, .wifi:after {
  content: "";
  position: absolute;
}
.wifi:before {
  width: 50%;
  height: 50%;
  left: 13%;
  top: 10%;
}
.wifi:after {
  width: 10%;
  height: 10%;
  left: 33%;
  top: 33%;
}

.wifi, .wifi:before, .wifi:after {
  display: inline-block;
  border: 2px solid transparent;
  border-top-color: white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.battery {
  position: relative;
  float: right;
  left: -30px;
}
.battery:before, .battery:after {
  content: "";
  position: absolute;
  background: white;
}
.battery:before {
  width: 10%;
  height: 40%;
  left: 185%;
  top: 30%;
}
.battery:after {
  width: 70%;
  height: 65%;
  left: 120%;
  top: 20%;
}

.time {
  font-weight: 100;
  font-size: 54px;
  color: white;
  margin-top: 14px;
}
.time span {
  display: block;
  font-size: 12px;
}

.home {
  background: white;
  width: 33.33333px;
  height: 33.33333px;
  position: absolute;
  bottom: -46.875px;
  left: 50%;
  right: 0;
  margin-left: -16.66667px;
  border: 1px solid rgba(136, 136, 136, 0.3);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(224, 223, 227, 0.5)), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(rgba(224, 223, 227, 0.5), #ffffff);
  background-image: -moz-linear-gradient(rgba(224, 223, 227, 0.5), #ffffff);
  background-image: -o-linear-gradient(rgba(224, 223, 227, 0.5), #ffffff);
  background-image: linear-gradient(rgba(224, 223, 227, 0.5), #ffffff);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.home:before, .home:after {
  content: "";
  position: absolute;
}
.home:before {
  width: 13.33333px;
  height: 13.33333px;
  left: 8px;
  top: 8px;
  border: 1.77778px solid rgba(136, 136, 136, 0.3);
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  -ms-border-radius: 30%;
  -o-border-radius: 30%;
  border-radius: 30%;
}
.home:after {
  width: 5px;
  height: 5px;
  background: rgba(21, 21, 21, 0.7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  top: -535.71429px;
  left: 12.5px;
}

.back .logo {
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  -moz-transform: rotateX(180deg) rotateY(180deg);
  -ms-transform: rotateX(180deg) rotateY(180deg);
  -o-transform: rotateX(180deg) rotateY(180deg);
  transform: rotateX(180deg) rotateY(180deg);
  font-size: 90.90909px;
  position: absolute;
  left: 0;
  right: 0;
  top: 240px;
  color: #282828;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.9);
}
.back .logo:before {
  content: "CSS3";
  position: absolute;
  font-size: 20px;
  top: 260.86957px;
  left: 0;
  right: 0;
}

.charger {
  background: #706f71;
  -webkit-border-radius: 20%;
  -moz-border-radius: 20%;
  -ms-border-radius: 20%;
  -o-border-radius: 20%;
  border-radius: 20%;
  width: 7%;
  left: 46.5%;
  height: 10px;
  position: relative;
  top: 12.12121px;
  -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

input[type=radio] {
  display: none;
  outline: none;
}
input[type=radio]:checked + label:before {
  background-color: white;
  border: 1px solid #0188CC;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  margin-left: -4px;
}

label {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  padding: 10px 20px 10px 10px;
  margin: 3px 3px 50px 3px;
  top: 50%;
  right: 20px;
}
label:before {
  content: "";
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  position: absolute;
  background-color: #888888;
  border: 0px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
label:hover:before {
  width: 8px;
  height: 8px;
  margin-top: -1px;
  margin-left: -2px;
}

label[for="nav-1"] {
  margin-top: -125px;
}

label[for="nav-2"] {
  margin-top: -100px;
}

label[for="nav-3"] {
  margin-top: -75px;
}

label[for="nav-4"] {
  margin-top: -50px;
}

label[for="nav-5"] {
  margin-top: -25px;
}

label[for="nav-6"] {
  margin-top: 0px;
}

label[for="nav-7"] {
  margin-top: 25px;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  background: #ffffff;
  text-align: center;
}

h1 {
  bottom: 20%;
  font-weight: 200;
  font-size: 70px;
  text-align: center;
}
h1 span {
  font-weight: 100;
  display: block;
  font-size: 38px;
}

#mail{
	color:#B6B5B5;
	background-position:center;
	background-color:#F5ECC8;
	text-align:center;
	}