.marvel-device{display:inline-block;position:relative;box-sizing:content-box!important;.screen{width:100%;position:relative;height:100%;z-index:3;overflow:hidden;display:block;border-radius:1px;box-shadow:0 0 0 3px #111}.bottom-bar,.top-bar{height:3px;background:black;width:100%;display:block}.middle-bar{width:3px;height:4px;top:0;left:90px;background:black;position:absolute}&.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.2);&:before{width:calc(100% - 12px);height:calc(100% - 12px);top:6px;left:6px;border-radius:50px;background:#f8f8f8;z-index:1}&:after,&:before{position:absolute;content:""}&:after{width:calc(100% - 16px);height:calc(100% - 16px);top:8px;left:8px;border-radius:48px;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.1),inset 0 0 6px 3px #ffffff;z-index:2}.home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:rgb(48,50,51);background:linear-gradient(135deg,rgba(48,50,51,1),rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1));&:before{background:#f8f8f8;position:absolute;content:"";border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}}.top-bar{top:68px}.bottom-bar,.top-bar{height:14px;background:#bfbfc0;position:absolute;left:0}.bottom-bar{bottom:68px}.sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0 2px 2px 0;background:#d9dbdc}.volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0 0 2px;background:#d9dbdc;&:before{left:2px;top:-78px;height:40px;width:2px}&:after,&:before{position:absolute;border-radius:2px 0 0 2px;background:inherit;content:"";display:block}&:after{left:0;top:82px;height:66px;width:4px}}.camera{width:12px;height:12px;top:24px;left:50%;margin-left:-6px}.camera,.sensor{background:#3c3d3d;position:absolute;border-radius:100%;z-index:3}.sensor{width:16px;height:16px;top:49px;left:134px}.speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}&.gold{background:#f9e7d3;.bottom-bar,.top-bar{background:white}.sleep,.volume{background:#f9e7d3}.home{background:rgb(206,187,169);background:linear-gradient(135deg,rgba(206,187,169,1),rgba(249,231,211,1) 50%,rgba(206,187,169,1))}}&.black{background:#464646;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.7);&:before{background:#080808}&:after{box-shadow:inset 0 0 3px 0 rgba(0,0,0,.1),inset 0 0 6px 3px #212121}.bottom-bar,.top-bar{background:#212121}.sleep,.volume{background:#464646}.camera{background:#080808}.home{background:rgb(8,8,8);background:linear-gradient(135deg,rgba(8,8,8,1),rgba(70,70,70,1) 50%,rgba(8,8,8,1));&:before{background:#080808}}}&.landscape{padding:24px 105px;height:375px;width:667px;.sleep{top:100%;border-radius:0 0 2px 2px;right:190px;height:4px;width:66px}.volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0 0;&:before{width:40px;height:2px;top:2px;right:-78px;left:auto}&:after,&:before{border-radius:2px 2px 0 0}&:after{left:-82px;width:66px;height:4px;top:0}}.top-bar{left:calc(100% - 68px - 14px)}.bottom-bar,.top-bar{width:14px;height:100%;top:0}.bottom-bar{left:68px}.home{top:50%;margin-top:-34px;margin-left:0;left:22px}.sensor{top:134px;left:calc(100% - 49px - 16px)}.speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);margin-top:-35px}.camera,.speaker{top:50%;margin-left:0}.camera{left:calc(100% - 32px);margin-top:-5px}}}&.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.2);&:before{width:calc(100% - 12px);height:calc(100% - 12px);top:6px;left:6px;border-radius:50px;background:#f8f8f8;z-index:1}&:after,&:before{position:absolute;content:""}&:after{width:calc(100% - 16px);height:calc(100% - 16px);top:8px;left:8px;border-radius:48px;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.1),inset 0 0 6px 3px #ffffff;z-index:2}.home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:rgb(48,50,51);background:linear-gradient(135deg,rgba(48,50,51,1),rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1));&:before{background:#f8f8f8;position:absolute;content:"";border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}}.top-bar{top:68px}.bottom-bar,.top-bar{height:14px;background:#bfbfc0;position:absolute;left:0}.bottom-bar{bottom:68px}.sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0 2px 2px 0;background:#d9dbdc}.volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0 0 2px;background:#d9dbdc;&:before{left:2px;top:-78px;height:40px;width:2px}&:after,&:before{position:absolute;border-radius:2px 0 0 2px;background:inherit;content:"";display:block}&:after{left:0;top:82px;height:66px;width:4px}}.camera{width:12px;height:12px;top:29px;left:50%;margin-left:-6px}.camera,.sensor{background:#3c3d3d;position:absolute;border-radius:100%;z-index:3}.sensor{width:16px;height:16px;top:54px;left:154px}.speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}&.gold{background:#f9e7d3;.bottom-bar,.top-bar{background:white}.sleep,.volume{background:#f9e7d3}.home{background:rgb(206,187,169);background:linear-gradient(135deg,rgba(206,187,169,1),rgba(249,231,211,1) 50%,rgba(206,187,169,1))}}&.black{background:#464646;box-shadow:inset 0 0 3px 0 rgba(0,0,0,.7);&:before{background:#080808}&:after{box-shadow:inset 0 0 3px 0 rgba(0,0,0,.1),inset 0 0 6px 3px #212121}.bottom-bar,.top-bar{background:#212121}.sleep,.volume{background:#464646}.camera{background:#080808}.home{background:rgb(8,8,8);background:linear-gradient(135deg,rgba(8,8,8,1),rgba(70,70,70,1) 50%,rgba(8,8,8,1));&:before{background:#080808}}}&.landscape{padding:26px 112px;height:414px;width:736px;.sleep{top:100%;border-radius:0 0 2px 2px;right:190px;height:4px;width:66px}.volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0 0;&:before{width:40px;height:2px;top:2px;right:-78px;left:auto}&:after,&:before{border-radius:2px 2px 0 0}&:after{left:-82px;width:66px;height:4px;top:0}}.top-bar{left:calc(100% - 68px - 14px)}.bottom-bar,.top-bar{width:14px;height:100%;top:0}.bottom-bar{left:68px}.home{top:50%;margin-top:-34px;margin-left:0;left:24px}.sensor{top:154px;left:calc(100% - 54px - 16px)}.speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);margin-top:-35px}.camera,.speaker{top:50%;margin-left:0}.camera{left:calc(100% - 29px);margin-top:-5px}}}&.iphone5c,&.iphone5s{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px;&:before{width:calc(100% - 8px);height:calc(100% - 8px);top:4px;content:"";left:4px;border-radius:46px;background:#1e1e1e;z-index:1}&:before,.sleep{position:absolute}.sleep{top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0 0;background:#282727}.volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0 0 2px;background:#282727;&:before{top:-75px;height:35px}&:after,&:before{position:absolute;left:0;width:4px;border-radius:2px 0 0 2px;background:inherit;content:"";display:block}&:after{bottom:-64px;height:27px}}.camera{top:32px;left:50%;margin-left:-5px}.camera,.sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;border-radius:5px;z-index:3}.sensor{left:160px}.sensor,.speaker{top:60px;margin-left:-32px}.speaker{background:#292728;width:64px;height:10px;position:absolute;left:50%;border-radius:5px;z-index:3}&.landscape{padding:22px 105px;height:320px;width:568px;.sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0 2px 2px 0}.volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0 0;&:before{width:35px;top:0;right:-75px;left:auto}&:after,&:before{height:4px;border-radius:2px 2px 0 0}&:after{bottom:0;left:-64px;z-index:999;width:27px}}.sensor{top:160px}.sensor,.speaker{left:calc(100% - 60px);margin-left:0;margin-top:-32px}.speaker{height:64px;width:10px;top:50%}.camera{left:calc(100% - 32px);top:50%;margin-left:0;margin-top:-5px}}}&.iphone5s{.home{border-radius:36px;width:68px;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.top-bar{top:70px}.bottom-bar,.top-bar{position:absolute;left:0}.bottom-bar{bottom:70px}&.landscape{.home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0}.top-bar{left:70px;top:0}.bottom-bar,.top-bar{width:3px;height:100%}.bottom-bar{right:70px;left:auto;bottom:0}}&.silver{background:#bcbcbc;&:before{background:#fcfcfc}.sleep,.volume{background:#d6d6d6}.bottom-bar,.top-bar{background:#eaebec}.home{box-shadow:inset 0 0 0 4px #bcbcbc}}&.gold{background:#f9e7d3;&:before{background:#fcfcfc}.sleep,.volume{background:#f9e7d3}.bottom-bar,.top-bar{background:white}.home{box-shadow:inset 0 0 0 4px #f9e7d3}}}&.iphone5c{background:white;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);.bottom-bar,.top-bar{display:none}.home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px;&:after{width:20px;height:20px;border:1px solid rgba(255,255,255,.1);border-radius:4px;position:absolute;display:block;content:"";top:50%;left:50%;margin-top:-11px;margin-left:-11px}}&.landscape{.home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0}}.sleep,.volume{background:#dddddd}&.red{background:#f96b6c;.sleep,.volume{background:#ed5758}}&.yellow{background:#f2dc60;.sleep,.volume{background:#e5ce4c}}&.green{background:#97e563;.sleep,.volume{background:#85d94d}}&.blue{background:#33a2db;.sleep,.volume{background:#2694cd}}}&.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px;&:before{content:"";width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.top-bar{top:60px}.bottom-bar,.top-bar{position:absolute;left:0}.bottom-bar{bottom:90px}.camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.speaker{width:64px;top:72px;margin-left:-32px}.sensor,.speaker{background:#292728;height:10px;position:absolute;left:50%;z-index:3;border-radius:5px}.sensor{width:40px;top:36px;margin-left:-20px}.home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px;&:after{width:20px;height:20px;border:1px solid rgba(255,255,255,.1);border-radius:4px;position:absolute;display:block;content:"";top:50%;left:50%;margin-top:-11px;margin-left:-11px}}.sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0 0;background:#4d4d4d}.volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0 0 2px;background:#4d4d4d;&:before{top:-70px;height:35px}&:after,&:before{position:absolute;left:0;width:4px;border-radius:2px 0 0 2px;background:inherit;content:"";display:block}&:after{bottom:-64px;height:27px}}&.landscape{padding:27px 129px;height:320px;width:480px;.bottom-bar{left:90px;bottom:0}.bottom-bar,.top-bar{height:100%;width:3px}.top-bar{left:calc(100% - 60px);top:0}.camera{top:134px;left:calc(100% - 72px);margin-left:0}.speaker{margin-top:-32px;left:calc(100% - 72px);height:64px}.sensor,.speaker{top:50%;margin-left:0;width:10px}.sensor{height:40px;left:calc(100% - 36px);margin-top:-20px}.home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0 2px 2px 0}.volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0 0;&:before{right:-70px;left:auto;top:0;width:35px}&:after,&:before{height:4px;border-radius:2px 2px 0 0}&:after{width:27px;bottom:0;left:-64px}}}&.silver{background:#bcbcbc;&:before{background:#fcfcfc}.home{background:#fcfcfc;box-shadow:inset 0 0 0 1px #bcbcbc;&:after{border:1px solid rgba(0,0,0,.2)}}.sleep,.volume{background:#d6d6d6}}}&.nexus5{padding:50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px;&:before{border-radius:600px/50px;background:inherit;content:"";top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818;&:before{border-radius:600px/50px;background:inherit;content:"";top:0;position:absolute;height:103%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}}.bottom-bar{display:none}.sleep{left:-3px;top:110px;height:100px;border-radius:2px 0 0 2px}.sleep,.volume{width:3px;position:absolute;background:inherit}.volume{right:-3px;top:70px;height:45px;border-radius:0 2px 2px 0}.camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%;&:before{background:#3c3d3d;width:6px;height:6px;content:"";display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}}&.landscape{padding:15px 50px;height:320px;width:568px;&:before{width:103.1%;height:calc(100% - 26px);border-radius:50px/600px}.top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px);&:before{width:103%;height:calc(100% - 26px);border-radius:50px/600px}}.sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0 0}.volume{height:3px;width:45px;right:70px;top:100%;border-radius:0 0 2px 2px}.camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px;&:before{top:-100px;left:2px}}}}&.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc;&:after,&:before{width:calc(100% - 52px);content:"";display:block;height:26px;background:inherit;position:absolute;border-radius:500px/40px;left:50%;transform:translateX(-50%)}&:before{top:-7px}&:after{bottom:-7px}.bottom-bar{display:none}.top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,.02) 20%,transparent 60%) 0 0,radial-gradient(rgba(0,0,0,.02) 20%,transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:50%;z-index:2;position:absolute;&:after,&:before{width:calc(100% - 48px);content:"";display:block;height:26px;background:inherit;position:absolute;border-radius:500px/40px;left:50%;transform:translateX(-50%)}&:before{top:-7px}&:after{bottom:-7px}}.sleep{width:3px;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0 0 2px}.sleep,.speaker{position:absolute}.speaker{width:68px;height:8px;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:0 0;border-radius:4px}.sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3;&:after{display:block;content:"";position:absolute;top:0;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}}.camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3;&:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:"";top:50%;left:50%;margin-top:-2px;margin-left:-2px}}.home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}&.landscape{padding:18px 60px;height:320px;width:568px;&:after,&:before{height:calc(100% - 52px);width:26px;border-radius:40px/500px;transform:translateY(-50%)}&:before{top:50%;left:-7px}&:after{top:50%;left:auto;right:-7px}.top-bar{&:after,&:before{width:26px;height:calc(100% - 48px);border-radius:40px/500px;transform:translateY(-50%)}&:before{right:-7px;top:50%;left:auto}&:after{left:-7px;top:50%;right:auto}}.sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0 0}.speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.sensor{right:20px;top:calc(100% - 110px);&:after{left:-12px;right:0}}.camera{top:calc(100% - 42px);right:24px}.home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}}&.black{background:#1e1e1e;.speaker{background:black}.sleep{background:#1e1e1e}.top-bar{background:radial-gradient(rgba(0,0,0,.05) 20%,transparent 60%) 0 0,radial-gradient(rgba(0,0,0,.05) 20%,transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.home{background:#2c2b2c}}}&.lumia920{padding:80px 35px 125px;background:#ffdd00;width:320px;height:533px;border-radius:40px/3px;.bottom-bar{display:none}.top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1;&:before{background:#1e1e1e;display:block;content:"";width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}}.volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0 2px 2px 0;&:before{top:190px}&:after,&:before{width:3px;position:absolute;content:"";display:block;height:50px;background:inherit;right:0;border-radius:0 2px 2px 0}&:after{top:460px}}.camera{background:#3c3d3d;width:10px;top:34px;right:130px;z-index:5}.camera,.speaker{height:10px;position:absolute;border-radius:5px}.speaker{background:#292728;width:64px;top:38px;left:50%;margin-left:-32px;z-index:3}&.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px/100px;.top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.volume{height:3px;right:130px;width:100px;top:100%;border-radius:0 0 2px 2px;&:before{right:190px}&:after,&:before{height:3px;top:0;width:50px;border-radius:0 0 2px 2px}&:after{right:430px}}.camera{right:30px;top:calc(100% - 140px)}.speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}}&.black{background:black}&.white{background:white;box-shadow:0 1px 2px 0 rgba(0,0,0,.2)}&.blue{background:#00acdd}&.red{background:#cc3e32}}&.htc-one{padding:72px 25px 100px;width:320px;height:568px;background:#bebebe;border-radius:34px;&:before{width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;background:#adadad;border-radius:32px}&:after,&:before{content:"";display:block;position:absolute}&:after{width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px;background:#eeeeee;border-radius:30px}.top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px;&:before{content:"";width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0;z-index:1;left:2px}}.bottom-bar{display:none}.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:0 0;&:after{content:"";height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}}.camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3;&:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:"";top:50%;left:50%;margin-top:-4px;margin-left:-4px}}.sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3;&:after{display:block;content:"";position:absolute;top:0;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}}&.landscape{padding:25px 72px 25px 100px;height:320px;width:568px;.top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0;margin-top:-108px;&:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}}.camera{right:18px;top:calc(100% - 38px)}.sensor{left:calc(100% - 29px);top:60px;:after{right:0;top:-12px}}}}&.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px;&:before{width:calc(100% - 8px);height:calc(100% - 8px);content:"";display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}&:before,.camera{position:absolute}.camera{background:#3c3d3d;width:10px;height:10px;top:44px;left:50%;margin-left:-5px;border-radius:100%}.bottom-bar,.top-bar{display:none}.home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px;&:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,.1);border-radius:4px;position:absolute;display:block;content:"";top:50%;left:50%}}&.landscape{height:576px;width:768px;padding:25px 90px;.camera{left:calc(100% - 44px);margin-top:-5px}.camera,.home{top:50%;margin-left:0}.home{left:22px;margin-top:-25px}}&.silver{background:#bcbcbc;&:before{background:#fcfcfc}.home{background:#fcfcfc;box-shadow:inset 0 0 0 1px #bcbcbc;&:after{border:1px solid rgba(0,0,0,.2)}}}}&.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px;&:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:"";display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:"";display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;box-shadow:inset 0 -4px 13px 3px rgba(34,34,34,.6);&:before{width:100%;height:24px;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}&:after,&:before{content:"";display:block;top:0;left:0}&:after{width:16%;height:14px;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;right:0;border-radius:0 0 20px 20px;box-shadow:inset 0 -3px 10px #999}}.bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:"";display:block;top:680px;left:-70px;&:after,&:before{height:calc(100% - 2px);width:80px;content:"";display:block;top:0;position:absolute}&:before{left:0;background:#f0f0f0;background:linear-gradient(90deg,#747474 0,#c3c3c3 5%,#ebebeb 14%,#979797 41%,#f0f0f0 80%,#f0f0f0 100%,#f0f0f0 0)}&:after{right:0;background:#f0f0f0;background:linear-gradient(90deg,#f0f0f0 0,#f0f0f0 0,#f0f0f0 20%,#979797 59%,#ebebeb 86%,#c3c3c3 95%,#747474)}}.camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.home{display:none}}&.iphone-x{width:375px;height:812px;padding:26px;background:#fdfdfd;box-shadow:inset 0 0 11px 0 black;border-radius:66px;.overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0,rgba(255,255,255,0) 60%)}.shadow--tl{top:-20px;left:-20px}.shadow--tr{top:-20px;right:-20px}.shadow--bl{bottom:-20px;left:-20px}.shadow--br{bottom:-20px;right:-20px}&:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:"";left:5px;border-radius:61px;background:black;z-index:1}.inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;box-shadow:inset 0 0 15px 0 rgba(white,.66);z-index:1;&:before{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}}.screen{border-radius:40px;box-shadow:none}.bottom-bar,.top-bar{width:100%;position:absolute;height:8px;background:rgba(black,.1);left:0}.top-bar{top:80px}.bottom-bar{bottom:80px}.sleep,.volume,.volume:after,.volume:before{width:3px;background:#b5b5b5;position:absolute}.volume{left:-3px;top:116px;height:32px;&:before{top:62px}&:after,&:before{height:62px;content:"";left:0}&:after{top:140px}}.sleep{height:96px;top:200px;right:-3px}.camera{width:6px;border-radius:100%;left:154px;background:#0d4d71}.camera,.speaker{height:6px;top:9px;position:absolute}.speaker{width:60px;left:50%;margin-left:-30px;background:#171818;border-radius:6px}.notch{position:absolute;width:210px;height:30px;top:26px;left:108px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px;&:after,&:before{content:"";height:8px;position:absolute;top:0;width:8px}&:after{background:radial-gradient(circle at bottom left,transparent 0,transparent 70%,black 0,black 100%);left:-8px}&:before{background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,black 0,black 100%);right:-8px}}&.landscape{height:375px;width:812px;.bottom-bar,.top-bar{width:8px;height:100%;top:0}.top-bar{left:80px}.bottom-bar{right:80px;bottom:auto;left:auto}.sleep,.volume,.volume:after,.volume:before{height:3px}.inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px/200px}.volume{bottom:-3px;top:auto;left:116px;width:32px;&:before{width:62px;left:62px;top:0}&:after{width:62px;left:140px;top:0}}.sleep{width:96px;left:200px;top:-3px;right:auto}.camera{left:9px;bottom:154px;top:auto}.speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.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;&:after,&:before{left:0}&:after{background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,black 0,black 100%);bottom:-8px;top:auto}&:before{background:radial-gradient(circle at top right,transparent 0,transparent 70%,black 0,black 100%);top:-8px}}}}&.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px;.overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%;&:before{content:"";height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}}.sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%;&:before{content:"";height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}}.more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;box-shadow:0 0 0 2px rgba(white,.1);z-index:1;border-radius:100%;&:before{content:"";height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}}.sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px;&:before{content:"";top:168px;width:2px;position:absolute;left:0;background:black;height:56px}}.inner{width:100%;height:calc(100% - 8px);top:2px;left:0;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;box-shadow:inset 0 0 6px 0 rgba(white,.5)}.inner,.shadow{position:absolute;content:""}.shadow{box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(white,.5),0 0 20px 0 white,0 0 20px 0 rgba(white,.5);height:101%;top:-.5%;width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.screen{border-radius:14px;box-shadow:none}&.landscape{height:400px;width:822px;padding:10px 45px;.speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.camera{top:86px;right:18px;left:auto;&:before{top:-22px;left:5px}}.sensors{top:120px;right:22px;left:auto;&:before{top:18px;left:0}}.more-sensors{top:285px;right:18px;left:auto;&:before{top:40px;left:4px}}.sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.volume{width:120px;height:2px;top:-2px;right:168px;left:auto;&:before{right:168px;left:auto;top:0;width:56px;height:2px}}.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}.shadow{width:101%;height:calc(100% - 20px);left:-.5%;top:10px}}}}