body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.device, .device div:not(.screen *), *:before, *:after {
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
} .ia-s5.white, .ia-s5.white .select-landscape {
color: black;
}
a {
text-decoration: none;
}
.selector {
width: 100%;
text-align: center;
margin-top: 100px;
display: block;
position: absolute;
bottom: 100px;
left: 0;
}
.selector li {
width: 30px;
height: 30px;
margin: 0 10px;
display: inline-block;
text-indent: -9999px;
-webkit-border-radius: 30px;
border-radius: 30px;
line-height: 30px;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-moz-transform: scale(0.6);
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
}
.select-black {
background: #2c2b2c;
}
.select-silver {
background: #f0f0f0;
}
.select-gold {
background: #f1e2d0;
}
.select-white, .ia-s5 .select-white, .ia-s5 .select-white.selected {
background: white;
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
.select-white.selected {
-webkit-box-shadow: none;
box-shadow: none;
}
.select-red {
background: #f96b6c;
}
.select-yellow {
background: #f2dc60;
}
.select-green {
background: #97e563;
}
.select-blue {
background: #33a2db;
}
.select-landscape {
text-indent: 0px !important;
width: 100px !important;
color: #1e1e1e;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
-webkit-box-shadow: none !important;
box-shadow: none !important;
letter-spacing: 2px;
padding: 0 10px;
}
.selector li:hover {
opacity: 1;
}
.selector li.selected {
-webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1);
-webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.top-bar, .bottom-bar {
height: 3px;
background: black;
width: 100%;
display: block;
}
.middle-bar {
width: 3px;
height: 4px;
top: 0px;
left: 90px;
background: black;
position: absolute;
}
.device .screen {
width: 100%;
position: relative;
height: 100%;
z-index: 2;
text-align: left; display: block;
-webkit-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 0 0 3px #111;
box-shadow: 0 0 0 3px #111;
} .ia-iphone5s .device, .ia-iphone5c .device {
padding: 105px 22px;
margin: 0 auto;
background: #2c2b2c;
position: relative;
width: 320px;
height: 568px;
display: block;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.ia-iphone5s.landscape .device, .ia-iphone5c.landscape .device {
padding: 22px 105px;
height: 320px;
width: 568px;
}
.ia-iphone5s .inner, .ia-iphone5c .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 8px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 8px);
position: absolute;
top: 4px;
left: 4px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border-radius: 46px;
background: #1e1e1e;
z-index: 1;
}
.ia-iphone5s .sleep, .ia-iphone5c .sleep {
position: absolute;
top: -4px;
right: 60px;
width: 60px;
height: 4px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
background: #282727;
}
.ia-iphone5s.landscape .sleep, .ia-iphone5c.landscape .sleep {
right: -4px;
top: calc(100% - 120px);
top: -webkit-calc(100% - 120px);
height: 60px;
width: 4px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-iphone5s .volume, .ia-iphone5c .volume {
position: absolute;
left: -4px;
top: 180px;
z-index: 0;
height: 27px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: #282727;
}
.ia-iphone5s.landscape .volume, .ia-iphone5c.landscape .volume {
width: 27px;
height: 4px;
top: -4px;
left: calc(100% - 180px);
left: -webkit-calc(100% - 180px);
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone5s .volume:before, .ia-iphone5c .volume:before {
position: absolute;
left: 0px;
top: -75px;
height: 35px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: inherit;
content: '';
display: block;
}
.ia-iphone5s.landscape .volume:before, .ia-iphone5c.landscape .volume:before {
width: 35px;
height: 4px;
top: 0px;
right: -75px;
left: auto;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone5s .volume:after, .ia-iphone5c .volume:after {
position: absolute;
left: 0px;
bottom: -64px;
height: 27px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: inherit;
content: '';
display: block;
}
.ia-iphone5s.landscape .volume:after, .ia-iphone5c.landscape .volume:after {
bottom: 0px;
left: -64px;
z-index: 999;
height: 4px;
width: 27px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone5s .screen {
background: rgb(226,228,228);
background: -moz-linear-gradient(top, rgba(226,228,228,1) 0%, rgba(125,130,129,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,228,228,1)), color-stop(100%,rgba(125,130,129,1)));
background: -webkit-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: -o-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: -ms-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: linear-gradient(to bottom, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e4e4', endColorstr='#7d8281',GradientType=0 );
}
.ia-iphone5s.gold .screen {
background: rgb(241,226,208);
background: -moz-linear-gradient(top, rgba(241,226,208,1) 0%, rgba(235,218,199,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,226,208,1)), color-stop(100%,rgba(235,218,199,1)));
background: -webkit-linear-gradient(top, rgba(241,226,208,1) 0%,rgba(235,218,199,1) 100%);
background: -o-linear-gradient(top, rgba(241,226,208,1) 0%,rgba(235,218,199,1) 100%);
background: -ms-linear-gradient(top, rgba(241,226,208,1) 0%,rgba(235,218,199,1) 100%);
background: linear-gradient(to bottom, rgba(241,226,208,1) 0%,rgba(235,218,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e2d0', endColorstr='#ebdac7',GradientType=0 );
}
.ia-iphone5s.black .screen {
background: rgb(179,179,183);
background: -moz-linear-gradient(top, rgba(179,179,183,1) 0%, rgba(66,64,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,179,183,1)), color-stop(100%,rgba(66,64,68,1)));
background: -webkit-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: -o-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: -ms-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: linear-gradient(to bottom, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b3b7', endColorstr='#424044',GradientType=0 );
}
.ia-iphone5c.white .screen {
background: rgb(217,217,217);
background: -moz-linear-gradient(top, rgba(217,217,217,1) 0%, rgba(161,161,161,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(217,217,217,1)), color-stop(100%,rgba(161,161,161,1)));
background: -webkit-linear-gradient(top, rgba(217,217,217,1) 0%,rgba(161,161,161,1) 100%);
background: -o-linear-gradient(top, rgba(217,217,217,1) 0%,rgba(161,161,161,1) 100%);
background: -ms-linear-gradient(top, rgba(217,217,217,1) 0%,rgba(161,161,161,1) 100%);
background: linear-gradient(to bottom, rgba(217,217,217,1) 0%,rgba(161,161,161,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9d9d9', endColorstr='#a1a1a1',GradientType=0 );
}
.ia-iphone5c.red .screen {
background: rgb(255,116,116);
background: -moz-linear-gradient(top, rgba(255,116,116,1) 0%, rgba(220,148,223,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,116,116,1)), color-stop(100%,rgba(220,148,223,1)));
background: -webkit-linear-gradient(top, rgba(255,116,116,1) 0%,rgba(220,148,223,1) 100%);
background: -o-linear-gradient(top, rgba(255,116,116,1) 0%,rgba(220,148,223,1) 100%);
background: -ms-linear-gradient(top, rgba(255,116,116,1) 0%,rgba(220,148,223,1) 100%);
background: linear-gradient(to bottom, rgba(255,116,116,1) 0%,rgba(220,148,223,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7474', endColorstr='#dc94df',GradientType=0 );
}
.ia-iphone5c.yellow .screen {
background: rgb(255,236,109);
background: -moz-linear-gradient(top, rgba(255,236,109,1) 0%, rgba(255,165,70,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,236,109,1)), color-stop(100%,rgba(255,165,70,1)));
background: -webkit-linear-gradient(top, rgba(255,236,109,1) 0%,rgba(255,165,70,1) 100%);
background: -o-linear-gradient(top, rgba(255,236,109,1) 0%,rgba(255,165,70,1) 100%);
background: -ms-linear-gradient(top, rgba(255,236,109,1) 0%,rgba(255,165,70,1) 100%);
background: linear-gradient(to bottom, rgba(255,236,109,1) 0%,rgba(255,165,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffec6d', endColorstr='#ffa546',GradientType=0 );
}
.ia-iphone5c.blue .screen {
background: rgb(157,206,253);
background: -moz-linear-gradient(top, rgba(157,206,253,1) 0%, rgba(102,211,173,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,206,253,1)), color-stop(100%,rgba(102,211,173,1)));
background: -webkit-linear-gradient(top, rgba(157,206,253,1) 0%,rgba(102,211,173,1) 100%);
background: -o-linear-gradient(top, rgba(157,206,253,1) 0%,rgba(102,211,173,1) 100%);
background: -ms-linear-gradient(top, rgba(157,206,253,1) 0%,rgba(102,211,173,1) 100%);
background: linear-gradient(to bottom, rgba(157,206,253,1) 0%,rgba(102,211,173,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcefd', endColorstr='#66d3ad',GradientType=0 );
}
.ia-iphone5c.green .screen {
background: rgb(151,213,85);
background: -moz-linear-gradient(top, rgba(151,213,85,1) 0%, rgba(211,237,32,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(151,213,85,1)), color-stop(100%,rgba(211,237,32,1)));
background: -webkit-linear-gradient(top, rgba(151,213,85,1) 0%,rgba(211,237,32,1) 100%);
background: -o-linear-gradient(top, rgba(151,213,85,1) 0%,rgba(211,237,32,1) 100%);
background: -ms-linear-gradient(top, rgba(151,213,85,1) 0%,rgba(211,237,32,1) 100%);
background: linear-gradient(to bottom, rgba(151,213,85,1) 0%,rgba(211,237,32,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d555', endColorstr='#d3ed20',GradientType=0 );
}
.ia-iphone5s .camera, .ia-iphone5c .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 32px;
left: 50%;
margin-left: -5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.ia-iphone5s.landscape .camera, .ia-iphone5c.landscape .camera {
left: calc(100% - 32px);
left: -webkit-calc(100% - 32px);
top: 50%;
margin-left: 0px;
margin-top: -5px;
}
.ia-iphone5s .sensor, .ia-iphone5c .sensor {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 60px;
left: 160px;
z-index: 3;
margin-left: -32px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-iphone5s.landscape .sensor, .ia-iphone5c.landscape .sensor {
top: 160px;
left: calc(100% - 60px);
left: -webkit-calc(100% - 60px);
margin-left: 0px;
margin-top: -32px;
}
.ia-iphone5s .speaker, .ia-iphone5c .speaker {
background: #292728;
width: 64px;
height: 10px;
position: absolute;
top: 60px;
left: 50%;
margin-left: -32px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.ia-iphone5s.landscape .speaker, .ia-iphone5c.landscape .speaker {
height: 64px;
width: 10px;
left: calc(100% - 60px);
left: -webkit-calc(100% - 60px);
top: 50%;
margin-left: 0px;
margin-top: -32px;
}
.ia-iphone5s .home {
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
width: 68px;
-webkit-box-shadow: inset 0 0 0 4px #2c2b2c;
box-shadow: inset 0 0 0 4px #2c2b2c;
height: 68px;
position: absolute;
left: 50%;
margin-left: -34px;
bottom: 19px;
z-index: 3;
}
.ia-iphone5s.landscape .home {
left: 19px;
bottom: 50%;
margin-bottom: -34px;
margin-left: 0px;
}
.ia-iphone5c .home {
background: #242324;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
width: 68px;
height: 68px;
z-index: 3;
position: absolute;
left: 50%;
margin-left: -34px;
bottom: 19px;
}
.ia-iphone5s.landscape .home {
left: 19px;
bottom: 50%;
margin-bottom: -34px;
margin-left: 0px;
}
.ia-iphone5c .home:after {
width: 20px;
height: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
display: block;
content: '';
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
.ia-iphone5c.landscape .home {
left: 19px;
bottom: 50%;
margin-bottom: -34px;
margin-left: 0px;
}
.ia-iphone5s .home:after {
display: none;
}
.ia-iphone5s .top-bar {
top: 70px;
position: absolute;
left: 0;
}
.ia-iphone5s.landscape .top-bar {
left: 70px;
top: 0px;
width: 3px;
height: 100%;
}
.ia-iphone5s .bottom-bar {
bottom: 70px;
position: absolute;
left: 0;
}
.ia-iphone5s.landscape .bottom-bar {
right: 70px;
left: auto;
bottom: 0px;
width: 3px;
height: 100%;
}
.ia-iphone4s .device {
padding: 129px 27px;
margin: 0 auto;
width: 320px;
height: 480px;
background: #474648;
position: relative;
-moz-border-radius: 54px;
-webkit-border-radius: 54px;
border-radius: 54px;
}
.ia-iphone4s.landscape .device {
padding: 27px 129px;
height: 320px;
width: 480px;
}
.ia-iphone4s .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 8px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 8px);
position: absolute;
top: 4px;
left: 4px;
z-index: 1;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background: #1e1e1e;
}
.ia-iphone4s .bottom-bar {
bottom: 90px;
position: absolute;
left: 0;
}
.ia-iphone4s.landscape .bottom-bar {
left: 90px;
bottom: 0px;
height: 100%;
width: 3px;
}
.ia-iphone4s .top-bar {
top: 60px;
position: absolute;
left: 0;
}
.ia-iphone4s.landscape .top-bar {
left: calc(100% - 60px);
left: -webkit-calc(100% - 60px);
top: 0px;
height: 100%;
width: 3px;
}
.ia-iphone4s .screen {
background: rgb(106,171,188);
background: -moz-linear-gradient(top, rgba(106,171,188,1) 0%, rgba(189,193,194,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(106,171,188,1)), color-stop(100%,rgba(189,193,194,1)));
background: -webkit-linear-gradient(top, rgba(106,171,188,1) 0%,rgba(189,193,194,1) 100%);
background: -o-linear-gradient(top, rgba(106,171,188,1) 0%,rgba(189,193,194,1) 100%);
background: -ms-linear-gradient(top, rgba(106,171,188,1) 0%,rgba(189,193,194,1) 100%);
background: linear-gradient(to bottom, rgba(106,171,188,1) 0%,rgba(189,193,194,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aabbc', endColorstr='#bdc1c2',GradientType=0 );
}
.ia-iphone4s .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 72px;
left: 134px;
z-index: 3;
margin-left: -5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-iphone4s.landscape .camera {
top: 134px;
left: calc(100% - 72px);
left: -webkit-calc(100% - 72px);
margin-left: 0;
}
.ia-iphone4s .speaker {
background: #292728;
width: 64px;
height: 10px;
position: absolute;
top: 72px;
left: 50%;
z-index: 3;
margin-left: -32px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-iphone4s.landscape .speaker {
top: 50%;
margin-left: 0;
margin-top: -32px;
left: calc(100% - 72px);
left: -webkit-calc(100% - 72px);
width: 10px;
height: 64px;
}
.ia-iphone4s .sensor {
background: #292728;
width: 40px;
height: 10px;
position: absolute;
top: 36px;
left: 50%;
z-index: 3;
margin-left: -20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-iphone4s.landscape .sensor {
height: 40px;
width: 10px;
left: calc(100% - 36px);
left: -webkit-calc(100% - 36px);
top: 50%;
margin-left: 0;
margin-top: -20px;
}
.ia-iphone4s .home {
background: #242324;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
width: 72px;
height: 72px;
z-index: 3;
position: absolute;
left: 50%;
margin-left: -36px;
bottom: 30px;
}
.ia-iphone4s.landscape .home {
left: 30px;
bottom: 50%;
margin-left: 0;
margin-bottom: -36px;
}
.ia-iphone4s .home:after {
width: 20px;
height: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
display: block;
content: '';
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
.ia-iphone4s .sleep {
position: absolute;
top: -4px;
right: 60px;
width: 60px;
height: 4px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
background: #4D4D4D;
}
.ia-iphone4s.landscape .sleep {
height: 60px;
width: 4px;
right: -4px;
top: calc(100% - 120px);
top: -webkit-calc(100% - 120px);
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-iphone4s .volume {
position: absolute;
left: -4px;
top: 160px;
height: 27px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: #4D4D4D;
}
.ia-iphone4s.landscape .volume {
top: -4px;
left: calc(100% - 187px);
left: -webkit-calc(100% - 187px);
height: 4px;
width: 27px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone4s .volume:before {
position: absolute;
left: 0px;
top: -70px;
height: 35px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: inherit;
content: '';
display: block;
}
.ia-iphone4s.landscape .volume:before {
right: -70px;
left: auto;
top: 0px;
width: 35px;
height: 4px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone4s .volume:after {
position: absolute;
left: 0px;
bottom: -64px;
height: 27px;
width: 4px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
background: inherit;
content: '';
display: block;
}
.ia-iphone4s.landscape .volume:after {
width: 27px;
height: 4px;
bottom: 0px;
left: -64px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-iphone4s.silver .device {
background: #bcbcbc;
}
.ia-nexus5 .device {
padding: 50px 15px 50px 15px;
-webkit-border-radius: 20px;
border-radius: 20px;
width: 320px;
height: 568px;
margin: 0 auto;
background: #181818;
position: relative;
}
.ia-nexus5.landscape .device {
padding: 15px 50px 15px 50px;
height: 320px;
width: 568px;
}
.ia-nexus5 .device:before {
-webkit-border-radius: 600px / 50px;
border-radius: 600px / 50px;
background: inherit;
content: '';
top: 0;
position: absolute;
height: 103.1%;
width: calc(100% - 26px);
width: -webkit-calc(100% - 26px);
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.ia-nexus5.landscape .device:before {
width: 103.1%;
height: calc(100% - 26px);
height: -webkit-calc(100% - 26px);
-webkit-border-radius: 50px / 600px;
border-radius: 50px / 600px;
}
.ia-nexus5 .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 6px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 6px);
position: absolute;
top: 3px;
left: 4px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: #1e1e1e;
}
.ia-nexus5.landscape .inner {
left: 3px;
top: 4px;
width: 98%;
height: 99%;
height: calc(100% - 8px);
width: calc(100% - 6px);
height: -webkit-calc(100% - 8px);
width: -webkit-calc(100% - 6px);
}
.ia-nexus5 .inner:before {
-webkit-border-radius: 600px / 50px;
border-radius: 600px / 50px;
background: inherit;
content: '';
top: 0;
position: absolute;
height: 103.0%;
width: calc(100% - 26px);
width: -webkit-calc(100% - 26px);
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.ia-nexus5.landscape .inner:before {
width: 103%;
height: calc(100% - 26px);
height: -webkit-calc(100% - 26px);
-webkit-border-radius: 50px / 600px;
border-radius: 50px / 600px;
}
.ia-nexus5 .button {
width: 3px;
position: absolute;
left: -3px;
top: 110px;
height: 100px;
background: inherit;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
}
.ia-nexus5.landscape .button {
height: 3px;
width: 100px;
left: calc(100% - 210px);
left: -webkit-calc(100% - 210px);
top: -3px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-nexus5 .lock {
width: 3px;
position: absolute;
right: -3px;
top: 70px;
height: 45px;
background: inherit;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-nexus5.landscape .lock {
height: 3px;
width: 45px;
right: 70px;
top: 100%;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.ia-nexus5 .screen {
-webkit-box-shadow: none;
box-shadow: none;
background: rgb(243,66,75);
background: -moz-linear-gradient(top, rgba(243,66,75,1) 0%, rgba(255,213,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,66,75,1)), color-stop(100%,rgba(255,213,31,1)));
background: -webkit-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: -o-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: -ms-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: linear-gradient(to bottom, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3424b', endColorstr='#ffd51f',GradientType=0 );
}
.ia-nexus5 .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 18px;
left: 50%;
z-index: 3;
margin-left: -5px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.ia-nexus5.landscape .camera {
top: 50%;
left: calc(100% - 18px);
left: -webkit-calc(100% - 18px);
margin-left: 0;
margin-top: -5px;
}
.ia-nexus5 .camera:before {
background: #3c3d3d;
width: 6px;
height: 6px;
content: '';
display: block;
position: absolute;
top: 2px;
left: -100px;
z-index: 3;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.ia-nexus5.landscape .camera:before {
top: -100px;
left: 2px;
}
.ia-ipad .device {
width: 576px;
height: 768px;
padding: 90px 25px;
margin: 0 auto;
background: #242324;
position: relative;
-moz-border-radius: 44px;
-webkit-border-radius: 44px;
border-radius: 44px;
}
.ia-ipad.landscape .device {
height: 576px;
width: 768px;
padding: 25px 90px;
}
.ia-ipad .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 8px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 8px);
position: absolute;
top: 4px;
left: 4px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
background: #1e1e1e;
}
.ia-ipad .screen {
background: rgb(13,52,119);
background: -moz-linear-gradient(top, rgba(13,52,119,1) 0%, rgba(173,243,222,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(13,52,119,1)), color-stop(100%,rgba(173,243,222,1)));
background: -webkit-linear-gradient(top, rgba(13,52,119,1) 0%,rgba(173,243,222,1) 100%);
background: -o-linear-gradient(top, rgba(13,52,119,1) 0%,rgba(173,243,222,1) 100%);
background: -ms-linear-gradient(top, rgba(13,52,119,1) 0%,rgba(173,243,222,1) 100%);
background: linear-gradient(to bottom, rgba(13,52,119,1) 0%,rgba(173,243,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d3477', endColorstr='#adf3de',GradientType=0 );
}
.ia-ipad .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 44px;
left: 50%;
margin-left: -5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-ipad.landscape .camera {
left: calc(100% - 44px);
left: -webkit-calc(100% - 44px);
top: 50%;
margin-left: 0;
margin-top: -5px;
}
.ia-ipad .home {
background: #242324;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
width: 50px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: 22px;
}
.ia-ipad.landscape .home {
top: 50%;
left: 22px;
margin-left: 0;
margin-top: -25px;
}
.ia-ipad .home:after {
width: 15px;
height: 15px;
margin-top: -8px;
margin-left: -8px;
border: 1px solid rgba(255, 255, 255, 0.1);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
display: block;
content: '';
top: 50%;
left: 50%;
}
.ia-lumia920 .device {
padding: 80px 35px 125px 35px;
margin: 0 auto;
background: #ffdd00;
position: relative;
width: 320px;
height: 568px;
display: block;
-moz-border-radius: 40px / 3px;
-webkit-border-radius: 40px / 3px;
border-radius: 40px / 3px;
}
.ia-lumia920.landscape .device {
padding: 35px 80px 35px 125px;
height: 320px;
width: 568px;
-moz-border-radius: 2px / 100px;
-webkit-border-radius: 2px / 100px;
border-radius: 2px / 100px;
}
.ia-lumia920 .inner {
width: 96%;
height: 96%;
width: calc(100% - 24px);
height: calc(100% - 32px);
width: -webkit-calc(100% - 24px);
height: -webkit-calc(100% - 32px);
position: absolute;
top: 16px;
left: 12px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
background: black;
z-index: 1;
}
.ia-lumia920 .inner:before {
background: #1e1e1e;
display: block;
content: '';
width: 98%;
height: 99%;
width: calc(100% - 4px);
height: calc(100% - 4px);
width: -webkit-calc(100% - 4px);
height: -webkit-calc(100% - 4px);
top: 2px;
left: 2px;
position: absolute;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
}
.ia-lumia920.landscape .inner {
width: 96%;
height: 96%;
height: calc(100% - 24px);
width: calc(100% - 32px);
height: -webkit-calc(100% - 24px);
width: -webkit-calc(100% - 32px);
left: 16px;
top: 12px;
}
.ia-lumia920.black .screen {
background: rgb(252,255,244);
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1)));
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.ia-lumia920.white .screen {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.ia-lumia920.blue .screen {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,172,221,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,172,221,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,172,221,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,172,221,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,172,221,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,172,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00acdd',GradientType=0 );
}
.ia-lumia920.red .screen {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,46,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(230,46,31,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,46,31,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,46,31,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,46,31,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(230,46,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e62e1f',GradientType=0 );
}
.ia-lumia920 .screen {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,221,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,221,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,221,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,221,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,221,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,221,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffdd00',GradientType=0 );
}
.ia-lumia920 .screen:before {
background-position: 0 -34px;
}
.ia-lumia920 .button {
width: 3px;
position: absolute;
top: 130px;
height: 100px;
background: black;
right: -3px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-lumia920.landscape .button {
height: 3px;
right: 130px;
width: 100px;
top: 100%;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.ia-lumia920 .button:before {
width: 3px;
position: absolute;
top: 190px;
content: '';
display: block;
height: 50px;
background: inherit;
right: 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-lumia920.landscape .button:before {
height: 3px;
right: 190px;
top: 0px;
width: 50px;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.ia-lumia920 .button:after {
width: 3px;
position: absolute;
top: 460px;
content: '';
display: block;
height: 50px;
background: inherit;
right: 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.ia-lumia920.landscape .button:after {
height: 3px;
right: 430px;
top: 0px;
width: 50px;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.ia-lumia920 .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 34px;
right: 130px;
z-index: 5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ia-lumia920.landscape .camera {
right: 28px;
top: calc(100% - 130px);
top: -webkit-calc(100% - 130px);
}
.ia-lumia920 .speaker {
background: #292728;
width: 64px;
height: 10px;
position: absolute;
top: 38px;
left: 50%;
margin-left: -32px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.ia-lumia920.landscape .speaker {
width: 10px;
height: 64px;
top: 50%;
margin-left: 0;
margin-top: -32px;
left: calc(100% - 38px);
left: -webkit-calc(100% - 38px);
}
.ia-s5 .device {
padding: 60px 18px;
-webkit-border-radius: 42px;
border-radius: 42px;
width: 320px;
height: 568px;
margin: 0 auto;
background: #bcbcbc;
position: relative;
}
.ia-s5.landscape .device {
padding: 18px 60px;
height: 320px;
width: 568px;
}
.ia-s5 .device:before, .ia-s5 .device:after {
width: calc(100% - 52px);
width: -webkit-calc(100% - 52px);
content: '';
display: block;
height: 26px;
background: inherit;
position: absolute;
-webkit-border-radius: 500px / 40px;
border-radius: 500px / 40px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.ia-s5.landscape .device:before, .ia-s5.landscape .device:after {
height: calc(100% - 52px);
height: -webkit-calc(100% - 52px);
width: 26px;
-webkit-border-radius: 40px / 500px;
border-radius: 40px / 500px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ia-s5 .device:before {
top: -7px;
}
.ia-s5.landscape .device:before {
top: 50%;
left: -7px;
}
.ia-s5 .device:after {
bottom: -7px;
}
.ia-s5.landscape .device:after {
top: 50%;
left: auto;
right: -7px;
}
.ia-s5 .inner {
-webkit-border-radius: 37px;
border-radius: 37px;
width: 98%;
height: 99%;
width: calc(100% - 10px);
height: calc(100% - 10px);
width: -webkit-calc(100% - 10px);
height: -webkit-calc(100% - 10px);
top: 5px;
left: 5px;
background: radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0,
radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;
background-color: white;
background-size: 4px 4px;
background-position: center;
z-index: 2;
position: absolute;
}
.ia-s5 .inner:before, .ia-s5 .inner:after {
width: calc(100% - 48px);
width: -webkit-calc(100% - 48px);
content: '';
display: block;
height: 26px;
background: inherit;
position: absolute;
-webkit-border-radius: 500px / 40px;
border-radius: 500px / 40px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.ia-s5.landscape .inner:before, .ia-s5.landscape .inner:after {
width: 26px;
height: calc(100% - 48px);
height: -webkit-calc(100% - 48px);
-webkit-border-radius: 40px / 500px;
border-radius: 40px / 500px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ia-s5 .inner:before {
top: -7px;
}
.ia-s5.landscape .inner:before {
right: -7px;
top: 50%;
left: auto;
}
.ia-s5 .inner:after {
bottom: -7px;
}
.ia-s5.landscape .inner:after {
left: -7px;
top: 50%;
right: auto;
}
.ia-s5 .screen {
-webkit-box-shadow: none;
box-shadow: none;
background: rgb(147,147,147);
background: -moz-linear-gradient(top, rgba(147,147,147,1) 0%, rgba(112,112,112,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,147,147,1)), color-stop(100%,rgba(112,112,112,1)));
background: -webkit-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(112,112,112,1) 100%);
background: -o-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(112,112,112,1) 100%);
background: -ms-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(112,112,112,1) 100%);
background: linear-gradient(to bottom, rgba(147,147,147,1) 0%,rgba(112,112,112,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#707070',GradientType=0 );
}
.ia-s5 .lock {
width: 3px;
position: absolute;
left: -3px;
top: 100px;
height: 100px;
background: #cecece;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
}
.ia-s5.landscape .lock {
height: 3px;
width: 100px;
left: calc(100% - 200px);
left: -webkit-calc(100% - 200px);
top: -3px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
.ia-s5 .speaker {
width: 68px;
height: 8px;
position: absolute;
top: 20px;
display: block;
z-index: 3;
left: 50%;
margin-left: -34px;
background-color: #bcbcbc;
background-position: top left;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.ia-s5.landscape .speaker {
height: 68px;
width: 8px;
left: calc(100% - 20px);
left: -webkit-calc(100% - 20px);
top: 50%;
margin-left: 0;
margin-top: -34px;
}
.ia-s5 .sensor {
display: block;
position: absolute;
top: 20px;
right: 110px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 8px;
height: 8px;
z-index: 3;
}
.ia-s5.landscape .sensor {
right: 20px;
top: calc(100% - 110px);
top: -webkit-calc(100% - 110px);
}
.ia-s5 .sensor:after {
display: block;
content: '';
position: absolute;
top: 0px;
right: 12px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 8px;
height: 8px;
z-index: 3;
}
.ia-s5.landscape .sensor:after {
top: -12px;
right: 0px;
}
.ia-s5 .camera {
display: block;
position: absolute;
top: 24px;
right: 42px;
background: black;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 10px;
height: 10px;
z-index: 3;
}
.ia-s5.landscape .camera {
top: calc(100% - 42px);
top: -webkit-calc(100% - 42px);
right: 24px;
}
.ia-s5 .camera:before {
width: 4px;
height: 4px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
content: '';
top: 50%;
left: 50%;
margin-top: -2px;
margin-left: -2px;
}
.ia-s5 .home {
position: absolute;
z-index: 3;
bottom: 17px;
left: 50%;
width: 70px;
height: 20px;
background: white;
-webkit-border-radius: 18px;
border-radius: 18px;
display: block;
margin-left: -35px;
border: 2px solid black;
}
.ia-s5.landscape .home {
width: 20px;
height: 70px;
bottom: 50%;
margin-bottom: -35px;
margin-left: 0;
left: 17px;
}
.ia-htc-one .device {
padding: 72px 25px 100px 25px;
margin: 0 auto;
width: 320px;
height: 568px;
background: #bebebe;
position: relative;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
border-radius: 34px;
}
.ia-htc-one.landscape .device {
padding: 25px 72px 25px 100px;
height: 320px;
width: 568px;
}
.ia-htc-one .device:before {
content: '';
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
width: -webkit-calc(100% - 4px);
height: -webkit-calc(100% - 4px);
position: absolute;
top: 2px;
left: 2px;
background: #adadad;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
}
.ia-htc-one .device:after {
content: '';
display: block;
width: calc(100% - 8px);
height: calc(100% - 8px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 8px);
position: absolute;
top: 4px;
left: 4px;
background: #eeeeee;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.ia-htc-one .screen {
-webkit-box-shadow: none;
box-shadow: none;
background: slategray;
}
.ia-htc-one .inner {
width: calc(100% - 4px);
width: -webkit-calc(100% - 4px);
height: 635px;
position: absolute;
background: #424242;
top: 50px;
z-index: 1;
left: 2px;
}
.ia-htc-one.landscape .inner {
height: calc(100% - 4px);
height: -webkit-calc(100% - 4px);
width: 635px;
left: calc(100% - 685px);
left: -webkit-calc(100% - 685px);
top: 2px;
}
.ia-htc-one .inner:before {
content: '';
position: absolute;
width: calc(100% - 4px);
width: -webkit-calc(100% - 4px);
height: 100%;
position: absolute;
background: black;
top: 0px;
z-index: 1;
left: 2px;
}
.ia-htc-one .speaker {
height: 16px;
width: 216px;
display: block;
position: absolute;
top: 22px;
z-index: 2;
left: 50%;
margin-left: -108px;
background: radial-gradient(#343434 25%, transparent 50%) 0 0,
radial-gradient(#343434 25%, transparent 50%) 4px 4px;
background-size: 4px 4px;
background-position: top left;
}
.ia-htc-one.landscape .speaker {
width: 16px;
height: 216px;
left: calc(100% - 38px);
left: -webkit-calc(100% - 38px);
top: 50%;
margin-left: 0px;
margin-top: -108px;
}
.ia-htc-one .speaker:after {
content: '';
height: 16px;
width: 216px;
display: block;
position: absolute;
top: 676px;
z-index: 2;
left: 50%;
margin-left: -108px;
background: inherit;
}
.ia-htc-one.landscape .speaker:after {
width: 16px;
height: 216px;
left: calc(100% - 692px);
left: -webkit-calc(100% - 692px);
top: 50%;
margin-left: 0;
margin-top: -108px;
}
.ia-htc-one .camera {
display: block;
position: absolute;
top: 18px;
right: 38px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 24px;
height: 24px;
z-index: 3;
}
.ia-htc-one.landscape .camera {
right: 18px;
top: calc(100% - 38px);
top: -webkit-calc(100% - 38px);
}
.ia-htc-one .camera:before {
width: 8px;
height: 8px;
background: black;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
content: '';
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -4px;
}
.ia-htc-one .sensor {
display: block;
position: absolute;
top: 29px;
left: 60px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 8px;
height: 8px;
z-index: 3;
}
.ia-htc-one.landscape .sensor {
left: calc(100% - 29px);
left: -webkit-calc(100% - 29px);
top: 60px;
}
.ia-htc-one .sensor:after {
display: block;
content: '';
position: absolute;
top: 0px;
right: 12px;
background: #3c3d3d;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 8px;
height: 8px;
z-index: 3;
}
.ia-htc-one.landscape .sensor:after {
right: 0;
top: -12px;
}
.ia-iphone5s.silver .device, .ia-iphone4s.silver .device, .ia-ipad.silver .device, .ia-ipad-landscape.silver .device {
background: #bcbcbc;
}
.ia-iphone5s.gold .device {
background: #f1e2d0;
}
.ia-iphone5s.silver .inner, .ia-iphone5s.gold .inner, .ia-iphone4s.silver .inner, .ia-ipad.silver .inner, .ia-ipad-landscape .inner {
background: #fcfcfc;
}
.ia-iphone5s.silver .home {
-webkit-box-shadow: inset 0 0 0 4px #bcbcbc;
box-shadow: inset 0 0 0 4px #bcbcbc;
}
.ia-iphone5s.gold .home {
-webkit-box-shadow: inset 0 0 0 4px #f1e2d0;
box-shadow: inset 0 0 0 4px #f1e2d0;
}
.ia-iphone4s.silver .home, .ia-ipad.silver .home, .ia-ipad-landscape.silver .home {
background: #fcfcfc;
-webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
box-shadow: inset 0 0 0 1px #bcbcbc;
}
.silver .home:after, .gold .home:after {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.ia-iphone5s.silver .top-bar, .ia-iphone5s.silver .bottom-bar, .ia-iphone5s.gold .top-bar, .ia-iphone5s.gold .bottom-bar {
background: #eaebec;
}
.ia-iphone5c.white .device {
background: white;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.ia-iphone5c.white .volume, .ia-iphone5c.white .sleep {
background: #dddddd;
}
.ia-iphone5c.red .device {
background: #f96b6c;
}
.ia-iphone5c.red .volume, .ia-iphone5c.red .sleep {
background: #ed5758;
}
.ia-iphone5c.yellow .device {
background: #f2dc60;
}
.ia-iphone5c.yellow .volume, .ia-iphone5c.yellow .sleep {
background: #e5ce4c;
}
.ia-iphone5c.green .device {
background: #97e563;
}
.ia-iphone5c.green .volume, .ia-iphone5c.green .sleep {
background: #85d94d;
}
.ia-iphone5c.blue .device {
background: #33a2db;
}
.ia-iphone5c.blue .volume, .ia-iphone5c.blue .sleep {
background: #2694cd;
}
.ia-iphone5s.silver .volume, .ia-iphone5s.silver .sleep,  .ia-iphone4s.silver .volume, .ia-iphone4s.silver .sleep {
background: #d6d6d6;
}
.ia-iphone5s.gold .volume, .ia-iphone5s.gold .sleep {
background: #ebdac7;
}
.ia-lumia920.black .device {
background: black;
}
.ia-lumia920.white .device {
background: white;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.ia-lumia920.blue .device {
background: #00acdd;
}
.ia-lumia920.red .device {
background: #e62e1f;
}
.ia-s5.black .device, .ia-s5.black .speaker, .ia-s5.black .lock {
background: black;
}
.ia-s5.black .inner {
background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0,
radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;
background-color: #2c2b2c;
background-size: 4px 4px;
}
.ia-s5.black .home {
background: #2c2b2c;
}
.ia-iphone-x .device {
width: 375px;
height: 812px;
padding: 26px;
background: #fdfdfd;
-webkit-box-shadow: inset 0 0 11px 0 black;
box-shadow: inset 0 0 11px 0 black;
border-radius: 66px;
position: relative;
}
.ia-iphone-x .overflow {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 66px;
overflow: hidden
}
.ia-iphone-x .shadow {
border-radius: 100%;
width: 90px;
height: 90px;
position: absolute;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%)
}
.ia-iphone-x .shadow--tl {
top: -20px;
left: -20px
}
.ia-iphone-x .shadow--tr {
top: -20px;
right: -20px
}
.ia-iphone-x .shadow--bl {
bottom: -20px;
left: -20px
}
.ia-iphone-x .shadow--br {
bottom: -20px;
right: -20px
}
.ia-iphone-x .device:before {
width: calc(100% - 10px);
height: calc(100% - 10px);
position: absolute;
top: 5px;
content: '';
left: 5px;
border-radius: 61px;
background: black;
z-index: 1
}
.ia-iphone-x .inner-shadow {
width: calc(100% - 20px);
height: calc(100% - 20px);
position: absolute;
top: 10px;
overflow: hidden;
left: 10px;
border-radius: 56px;
-webkit-box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.66);
box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.66);
z-index: 1
}
.ia-iphone-x .inner-shadow:before {
-webkit-box-shadow: inset 0 0 20px 0 #FFFFFF;
box-shadow: inset 0 0 20px 0 #FFFFFF;
width: 100%;
height: 116%;
position: absolute;
top: -8%;
content: '';
left: 0;
border-radius: 200px / 112px;
z-index: 2
}
.ia-iphone-x .screen {
border-radius: 40px;
-webkit-box-shadow: none;
box-shadow: none
}
.ia-iphone-x .top-bar, .ia-iphone-x .bottom-bar {
width: 100%;
position: absolute;
height: 8px;
background: rgba(0, 0, 0, 0.1);
left: 0
}
.ia-iphone-x .top-bar {
top: 80px
}
.ia-iphone-x .bottom-bar {
bottom: 80px
}
.ia-iphone-x .volume, .ia-iphone-x .volume:before, .ia-iphone-x .volume:after, .ia-iphone-x .sleep {
width: 3px;
background: #b5b5b5;
position: absolute
}
.ia-iphone-x .volume {
left: -3px;
top: 116px;
height: 32px
}
.ia-iphone-x .volume:before {
height: 62px;
top: 62px;
content: '';
left: 0
}
.ia-iphone-x .volume:after {
height: 62px;
top: 140px;
content: '';
left: 0
}
.ia-iphone-x .sleep {
height: 96px;
top: 200px;
right: -3px
}
.ia-iphone-x .camera {
width: 6px;
height: 6px;
top: 9px;
border-radius: 100%;
position: absolute;
left: 154px;
background: #0d4d71
}
.ia-iphone-x .speaker {
height: 6px;
width: 60px;
left: 50%;
position: absolute;
top: 9px;
margin-left: -30px;
background: #171818;
border-radius: 6px
}
.ia-iphone-x .notch {
position: absolute;
width: 210px;
height: 30px;
top: 25px;
left: 108px;
z-index: 4;
background: black;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px
}
.ia-iphone-x .notch:before, .ia-iphone-x .notch:after {
content: '';
height: 8px;
position: absolute;
top: 1px;
width: 8px
}
.ia-iphone-x .notch:after {
background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
left: -8px
}
.ia-iphone-x .notch:before {
background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
right: -8px
}
.ia-iphone-x.landscape .device {
height: 375px;
width: 812px
}
.ia-iphone-x.landscape .top-bar, .ia-iphone-x.landscape .bottom-bar {
width: 8px;
height: 100%;
top: 0
}
.ia-iphone-x.landscape .top-bar {
left: 80px
}
.ia-iphone-x.landscape .bottom-bar {
right: 80px;
bottom: auto;
left: auto
}
.ia-iphone-x.landscape .volume, .ia-iphone-x.landscape .volume:before, .ia-iphone-x.landscape .volume:after, .ia-iphone-x.landscape .sleep {
height: 3px
}
.ia-iphone-x.landscape .inner-shadow:before {
height: 100%;
width: 116%;
left: -8%;
top: 0;
border-radius: 112px / 200px
}
.ia-iphone-x.landscape .volume {
bottom: -3px;
top: auto;
left: 116px;
width: 32px
}
.ia-iphone-x.landscape .volume:before {
width: 62px;
left: 62px;
top: 0
}
.ia-iphone-x.landscape .volume:after {
width: 62px;
left: 140px;
top: 0
}
.ia-iphone-x.landscape .sleep {
width: 96px;
left: 200px;
top: -3px;
right: auto
}
.ia-iphone-x.landscape .camera {
left: 9px;
bottom: 154px;
top: auto
}
.ia-iphone-x.landscape .speaker {
width: 6px;
height: 60px;
left: 9px;
top: 50%;
margin-top: -30px;
margin-left: 0
}
.ia-iphone-x.landscape .notch {
height: 210px;
width: 30px;
left: 26px;
bottom: 108px;
top: auto;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 0
}
.ia-iphone-x.landscape .notch:before, .ia-iphone-x.landscape .notch:after {
left: 0
}
.ia-iphone-x.landscape .notch:after {
background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
bottom: -8px;
top: auto
}
.ia-iphone-x.landscape .notch:before {
background: radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);
top: -8px
}
.ia-note8 .device{
width: 400px;
height: 822px;
background: black;
border-radius: 34px;
padding: 45px 10px
}
.ia-note8 .overflow {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 34px;
overflow: hidden
}
.ia-note8 .speaker {
height: 8px;
width: 56px;
left: 50%;
position: absolute;
top: 25px;
margin-left: -28px;
background: #171818;
z-index: 1;
border-radius: 8px
}
.ia-note8 .camera {
height: 18px;
width: 18px;
left: 86px;
position: absolute;
top: 18px;
background: #212b36;
z-index: 1;
border-radius: 100%
}
.ia-note8 .camera:before {
content: '';
height: 8px;
width: 8px;
left: -22px;
position: absolute;
top: 5px;
background: #212b36;
z-index: 1;
border-radius: 100%
}
.ia-note8 .sensors {
height: 10px;
width: 10px;
left: 120px;
position: absolute;
top: 22px;
background: #1d233b;
z-index: 1;
border-radius: 100%
}
.ia-note8 .sensors:before {
content: '';
height: 10px;
width: 10px;
left: 18px;
position: absolute;
top: 0;
background: #1d233b;
z-index: 1;
border-radius: 100%
}
.ia-note8 .more-sensors {
height: 16px;
width: 16px;
left: 285px;
position: absolute;
top: 18px;
background: #33244a;
-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
z-index: 1;
border-radius: 100%
}
.ia-note8 .more-sensors:before {
content: '';
height: 11px;
width: 11px;
left: 40px;
position: absolute;
top: 4px;
background: #214a61;
z-index: 1;
border-radius: 100%
}
.ia-note8 .sleep {
width: 2px;
height: 56px;
background: black;
position: absolute;
top: 288px;
right: -2px
}
.ia-note8 .volume {
width: 2px;
height: 120px;
background: black;
position: absolute;
top: 168px;
left: -2px
}
.ia-note8 .volume:before {
content: '';
top: 168px;
width: 2px;
position: absolute;
left: 0;
background: black;
height: 56px
}
.ia-note8 .inner {
width: 100%;
height: calc(100% - 8px);
position: absolute;
top: 2px;
content: '';
left: 0px;
border-radius: 34px;
border-top: 2px solid #9fa0a2;
border-bottom: 2px solid #9fa0a2;
background: black;
z-index: 1;
-webkit-box-shadow: inset 0 0 6px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 6px 0 rgba(255, 255, 255, 0.5)
}
.ia-note8 .shadow {
-webkit-box-shadow: inset 0 0 60px 0 rgba(255, 255, 255, 0.3), inset 0 0 30px 0 rgba(255, 255, 255, 0.4), 0 0 20px 0 rgba(255, 255, 255, 0.4), 0 0 20px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 60px 0 rgba(255, 255, 255, 0.3), inset 0 0 30px 0 rgba(255, 255, 255, 0.4), 0 0 20px 0 rgba(255, 255, 255, 0.4), 0 0 20px 0 rgba(255, 255, 255, 0.5);
height: 101%;
position: absolute;
top: -0.5%;
content: '';
width: calc(100% - 20px);
left: 10px;
border-radius: 38px;
z-index: 5;
pointer-events: none
}
.ia-note8 .screen {
border-radius: 14px;
-webkit-box-shadow: none;
box-shadow: none
}
.ia-note8.landscape .device {
height: 400px;
width: 822px;
padding: 10px 45px
}
.ia-note8.landscape .speaker {
height: 56px;
width: 8px;
top: 50%;
margin-top: -28px;
margin-left: 0;
right: 25px;
left: auto
}
.ia-note8.landscape .camera {
top: 86px;
right: 18px;
left: auto
}
.ia-note8.landscape .camera:before {
top: -22px;
left: 5px
}
.ia-note8.landscape .sensors {
top: 120px;
right: 22px;
left: auto
}
.ia-note8.landscape .sensors:before {
top: 18px;
left: 0
}
.ia-note8.landscape .more-sensors {
top: 285px;
right: 18px;
left: auto
}
.ia-note8.landscape .more-sensors:before {
top: 40px;
left: 4px
}
.ia-note8.landscape .sleep {
bottom: -2px;
top: auto;
right: 288px;
width: 56px;
height: 2px
}
.ia-note8.landscape .volume {
width: 120px;
height: 2px;
top: -2px;
right: 168px;
left: auto
}
.ia-note8.landscape .volume:before {
right: 168px;
left: auto;
top: 0;
width: 56px;
height: 2px
}
.ia-note8.landscape .inner {
height: 100%;
width: calc(100% - 8px);
left: 2px;
top: 0;
border-top: 0;
border-bottom: 0;
border-left: 2px solid #9fa0a2;
border-right: 2px solid #9fa0a2
}
.ia-note8.landscape .shadow {
width: 101%;
height: calc(100% - 20px);
left: -0.5%;
top: 10px
}