.device-mockup {
  position: relative;
  width: 100%;
  padding-bottom: 61.775701%;
}
.device-mockup > .device {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(macbook/macbook.png);
}
.device-mockup > .device > .screen {
  position: absolute;
  top: 11.0438729%;
  bottom: 14.6747352%;
  left: 13.364486%;
  right: 13.364486%;
  overflow: hidden;
}
.device-mockup > .device > .button {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  cursor: pointer;
}
.device-mockup.imac {
  padding-bottom: 81.230769%;
}
.device-mockup.imac > .device {
  background-image: url(imac/imac.png);
}
.device-mockup.imac > .device > .screen {
  top: 8.20707071%;
  bottom: 31.6919192%;
  left: 6.61538462%;
  right: 6.61538462%;
}
.device-mockup.macbook {
  padding-bottom: 61.775701%;
}
.device-mockup.macbook > .device {
  background-image: url(macbook/macbook.png);
}
.device-mockup.macbook > .device > .screen {
  top: 11.0438729%;
  bottom: 14.6747352%;
  left: 13.364486%;
  right: 13.364486%;
}
.device-mockup.macbook_2015 {
  padding-bottom: 57.5%;
}
.device-mockup.macbook_2015.grey > .device,
.device-mockup.macbook_2015 > .device {
  background-image: url(macbook_2015/grey.png);
}
.device-mockup.macbook_2015.silver > .device,
.device-mockup.macbook_2015 > .device {
  background-image: url(macbook_2015/silver.png);
}
.device-mockup.macbook_2015.gold > .device,
.device-mockup.macbook_2015 > .device {
  background-image: url(macbook_2015/gold.png);
}
.device-mockup.macbook_2015 > .device > .screen {
  top: 7.5%;
  bottom: 10.9%;
  left: 12.46%;
  right: 12.56%;
}
.device-mockup.iphone5,
.device-mockup.iphone5.portrait {
  padding-bottom: 210.57%;
}
.device-mockup.iphone5.landscape {
  padding-bottom: 47.49%;
}
.device-mockup.iphone5.black > .device,
.device-mockup.iphone5.portrait.black > .device,
.device-mockup.iphone5 > .device {
  background-image: url(iphone5/iphone5_port_black.png);
}
.device-mockup.iphone5.landscape.black > .device,
.device-mockup.iphone5.landscape > .device {
  background-image: url(iphone5/iphone5_land_black.png);
}
.device-mockup.iphone5.portrait.white > .device,
.device-mockup.iphone5.white > .device {
  background-image: url(iphone5/iphone5_port_white.png);
}
.device-mockup.iphone5.landscape.white > .device {
  background-image: url(iphone5/iphone5_land_white.png);
}
.device-mockup.iphone5.portrait > .device > .screen,
.device-mockup.iphone5 > .device > .screen {
  top: 14.78%;
  bottom: 13.78%;
  left: 8.77%;
  right: 7.77%;
}
.device-mockup.iphone5.landscape > .device > .screen {
  top: 7.422488%;
  bottom: 8.422488%;
  left: 14.919127%;
  right: 14.019127%;
}
.device-mockup.iphone5.portrait > .device > .button,
.device-mockup.iphone5 > .device > .button {
  display: block;
  top: 88.3%;
  bottom: 2.5%;
  left: 40%;
  right: 40%;
}
.device-mockup.iphone5.landscape > .device > .button {
  display: block;
  top: 40%;
  bottom: 41%;
  left: 88.4%;
  right: 2.3%;
}
.device-mockup.iphone_se,
.device-mockup.iphone_se.portrait {
  padding-bottom: 209.83%;
}
.device-mockup.iphone_se.landscape {
  padding-bottom: 47.66%;
}
.device-mockup.iphone_se.black > .device,
.device-mockup.iphone_se.portrait.black > .device,
.device-mockup.iphone_se > .device {
  background-image: url(iphone_se/iphone_se_port_black.png);
}
.device-mockup.iphone_se.landscape.black > .device,
.device-mockup.iphone_se.landscape > .device {
  background-image: url(iphone_se/iphone_se_land_black.png);
}
.device-mockup.iphone_se.portrait.white > .device,
.device-mockup.iphone_se.white > .device {
  background-image: url(iphone_se/iphone_se_port_white.png);
}
.device-mockup.iphone_se.landscape.white > .device {
  background-image: url(iphone_se/iphone_se_land_white.png);
}
.device-mockup.iphone_se.gold > .device,
.device-mockup.iphone_se.portrait.gold > .device {
  background-image: url(iphone_se/iphone_se_port_gold.png);
}
.device-mockup.iphone_se.landscape.gold > .device {
  background-image: url(iphone_se/iphone_se_land_gold.png);
}
.device-mockup.iphone_se.portrait.rose > .device,
.device-mockup.iphone_se.rose > .device {
  background-image: url(iphone_se/iphone_se_port_rose.png);
}
.device-mockup.iphone_se.landscape.rose > .device {
  background-image: url(iphone_se/iphone_se_land_rose.png);
}
.device-mockup.iphone_se.portrait > .device > .screen,
.device-mockup.iphone_se > .device > .screen {
  top: 16.28%;
  bottom: 16.28%;
  left: 11.77%;
  right: 11.77%;
}
.device-mockup.iphone_se.landscape > .device > .screen {
  top: 11.722488%;
  bottom: 11.722488%;
  left: 16.0191273%;
  right: 16.0191273%;
}
.device-mockup.iphone_se.portrait > .device > .button,
.device-mockup.iphone_se > .device > .button {
  display: block;
  top: 86.3%;
  bottom: 5.5%;
  left: 42%;
  right: 42%;
}
.device-mockup.iphone_se.landscape > .device > .button {
  display: block;
  top: 42%;
  bottom: 42%;
  left: 86.4%;
  right: 5.1%;
}
.device-mockup.iphone6,
.device-mockup.iphone6.portrait {
  padding-bottom: 207.19%;
}
.device-mockup.iphone6.landscape {
  padding-bottom: 48.76%;
}
.device-mockup.iphone6.black > .device,
.device-mockup.iphone6.portrait.black > .device,
.device-mockup.iphone6 > .device {
  background-image: url(iphone_6/iphone_6_port_black.png);
}
.device-mockup.iphone6.landscape.black > .device,
.device-mockup.iphone6.landscape > .device {
  background-image: url(iphone_6/iphone_6_land_black.png);
}
.device-mockup.iphone6.portrait.white > .device,
.device-mockup.iphone6.white > .device {
  background-image: url(iphone_6/iphone_6_port_white.png);
}
.device-mockup.iphone6.landscape.white > .device {
  background-image: url(iphone_6/iphone_6_land_white.png);
}
.device-mockup.iphone6.gold > .device,
.device-mockup.iphone6.portrait.gold > .device {
  background-image: url(iphone_6/iphone_6_port_gold.png);
}
.device-mockup.iphone6.landscape.gold > .device {
  background-image: url(iphone_6/iphone_6_land_gold.png);
}
.device-mockup.iphone6.portrait > .device > .screen,
.device-mockup.iphone6 > .device > .screen {
  top: 12.58%;
  bottom: 12.88%;
  left: 6.77%;
  right: 6.77%;
}
.device-mockup.iphone6.landscape > .device > .screen {
  top: 6.77%;
  bottom: 6.77%;
  left: 12.58%;
  right: 12.88%;
}
.device-mockup.iphone6.portrait > .device > .button,
.device-mockup.iphone6 > .device > .button {
  display: block;
  top: 88.6%;
  bottom: 3.2%;
  left: 42%;
  right: 42%;
}
.device-mockup.iphone6.landscape > .device > .button {
  display: block;
  top: 42%;
  bottom: 42%;
  left: 88.6%;
  right: 3.2%;
}
.device-mockup.iphone6_plus.landscape {
  padding-bottom: 49.56%;
}
.device-mockup.iphone6_plus.landscape.black > .device,
.device-mockup.iphone6_plus.landscape > .device {
  background-image: url(iphone_6_plus/iphone_6_plus_black_land.png);
}
.device-mockup.iphone6_plus.landscape.white > .device {
  background-image: url(iphone_6_plus/iphone_6_plus_white_land.png);
}
.device-mockup.iphone6_plus.landscape.gold > .device {
  background-image: url(iphone_6_plus/iphone_6_plus_gold_land.png);
}
.device-mockup.iphone6_plus.landscape > .device > .screen {
  top: 5.97%;
  bottom: 5.97%;
  left: 11.38%;
  right: 11.58%;
}
.device-mockup.iphone6_plus.landscape > .device > .button {
  display: block;
  top: 43%;
  bottom: 43%;
  left: 89.9%;
  right: 3.2%;
}
.device-mockup.ipad,
.device-mockup.ipad.portrait {
  padding-bottom: 128.406276%;
}
.device-mockup.ipad.landscape {
  padding-bottom: 79.9086758%;
}
.device-mockup.ipad.black > .device,
.device-mockup.ipad.portrait.black > .device,
.device-mockup.ipad > .device {
  background-image: url(ipad/ipad_port_black.png);
}
.device-mockup.ipad.portrait.white > .device,
.device-mockup.ipad.white > .device {
  background-image: url(ipad/ipad_port_white.png);
}
.device-mockup.ipad.landscape.black > .device,
.device-mockup.ipad.landscape > .device {
  background-image: url(ipad/ipad_land_black.png);
}
.device-mockup.ipad.landscape.white > .device {
  background-image: url(ipad/ipad_land_white.png);
}
.device-mockup.ipad.portrait > .device > .screen,
.device-mockup.ipad > .device > .screen {
  top: 12.025723%;
  bottom: 12.154341%;
  left: 13.45995%;
  right: 13.45995%;
}
.device-mockup.ipad.landscape > .device > .screen {
  top: 13.87755102%;
  bottom: 13.87755102%;
  left: 11.5459883%;
  right: 11.5459883%;
}
.device-mockup.ipad.portrait > .device > .button,
.device-mockup.ipad > .device > .button {
  display: block;
  top: 90.2%;
  bottom: 5.5%;
  left: 47.3%;
  right: 47.3%;
}
.device-mockup.ipad.landscape > .device > .button {
  display: block;
  top: 47.3%;
  bottom: 47.3%;
  left: 90.8%;
  right: 4.9%;
}
.device-mockup.ipad_air,
.device-mockup.ipad_air.portrait {
  padding-bottom: 141.27%;
}
.device-mockup.ipad_air.landscape {
  padding-bottom: 70.79%;
}
.device-mockup.ipad_air.grey > .device,
.device-mockup.ipad_air.portrait.grey > .device,
.device-mockup.ipad_air > .device {
  background-image: url(ipad_air/ipad_air_gray_port.png);
}
.device-mockup.ipad_air.portrait.silver > .device,
.device-mockup.ipad_air.silver > .device {
  background-image: url(ipad_air/ipad_air_silver_port.png);
}
.device-mockup.ipad_air.landscape.grey > .device,
.device-mockup.ipad_air.landscape > .device {
  background-image: url(ipad_air/ipad_air_gray_land.png);
}
.device-mockup.ipad_air.landscape.silver > .device {
  background-image: url(ipad_air/ipad_air_silver_land.png);
}
.device-mockup.ipad_air.portrait > .device > .screen,
.device-mockup.ipad_air > .device > .screen {
  top: 9.025723%;
  bottom: 9.154341%;
  left: 7.45995%;
  right: 6.45995%;
}
.device-mockup.ipad_air.landscape > .device > .screen {
  top: 6.877551%;
  bottom: 6.877551%;
  left: 9.545988%;
  right: 9.545988%;
}
.device-mockup.ipad_air.portrait > .device > .button,
.device-mockup.ipad_air > .device > .button {
  display: block;
  top: 93.2%;
  bottom: 2.5%;
  left: 47.3%;
  right: 47.3%;
}
.device-mockup.ipad_air.landscape > .device > .button {
  display: block;
  top: 47.3%;
  bottom: 47.3%;
  left: 93.1%;
  right: 2.1%;
}
.device-mockup.ipad_air_2,
.device-mockup.ipad_air_2.portrait {
  padding-bottom: 141.38%;
}
.device-mockup.ipad_air_2.landscape {
  padding-bottom: 70.73%;
}
.device-mockup.ipad_air_2.grey > .device,
.device-mockup.ipad_air_2.portrait.grey > .device,
.device-mockup.ipad_air_2 > .device {
  background-image: url(ipad_air_2/ipad_air_2_gray_port.png);
}
.device-mockup.ipad_air_2.portrait.silver > .device,
.device-mockup.ipad_air_2.silver > .device {
  background-image: url(ipad_air_2/ipad_air_2_silver_port.png);
}
.device-mockup.ipad_air_2.gold > .device,
.device-mockup.ipad_air_2.portrait.gold > .device {
  background-image: url(ipad_air_2/ipad_air_2_gold_port.png);
}
.device-mockup.ipad_air_2.landscape.grey > .device,
.device-mockup.ipad_air_2.landscape > .device {
  background-image: url(ipad_air_2/ipad_air_2_gray_land.png);
}
.device-mockup.ipad_air_2.landscape.silver > .device {
  background-image: url(ipad_air_2/ipad_air_2_silver_land.png);
}
.device-mockup.ipad_air_2.landscape.gold > .device {
  background-image: url(ipad_air_2/ipad_air_2_gold_land.png);
}
.device-mockup.ipad_air_2.portrait > .device > .screen,
.device-mockup.ipad_air_2 > .device > .screen {
  top: 9.025723%;
  bottom: 8.854341%;
  left: 6.15995%;
  right: 6.15995%;
}
.device-mockup.ipad_air_2.landscape > .device > .screen {
  top: 6.277551%;
  bottom: 6.277551%;
  left: 8.545988%;
  right: 8.545988%;
}
.device-mockup.ipad_air_2.portrait > .device > .button,
.device-mockup.ipad_air_2 > .device > .button {
  display: block;
  top: 93.2%;
  bottom: 2.1%;
  left: 46.3%;
  right: 46.5%;
}
.device-mockup.ipad_air_2.landscape > .device > .button {
  display: block;
  top: 46.5%;
  bottom: 46.8%;
  left: 93.5%;
  right: 1.9%;
}
.device-mockup.ipad_pro,
.device-mockup.ipad_pro.portrait {
  padding-bottom: 138.63%;
}
.device-mockup.ipad_pro.landscape {
  padding-bottom: 72.14%;
}
.device-mockup.ipad_pro.grey > .device,
.device-mockup.ipad_pro.portrait.grey > .device,
.device-mockup.ipad_pro > .device {
  background-image: url(ipad_pro/ipad_pro_port_black.png);
}
.device-mockup.ipad_pro.portrait.silver > .device,
.device-mockup.ipad_pro.silver > .device {
  background-image: url(ipad_pro/ipad_pro_port_silver.png);
}
.device-mockup.ipad_pro.gold > .device,
.device-mockup.ipad_pro.portrait.gold > .device {
  background-image: url(ipad_pro/ipad_pro_port_gold.png);
}
.device-mockup.ipad_pro.landscape.grey > .device,
.device-mockup.ipad_pro.landscape > .device {
  background-image: url(ipad_pro/ipad_pro_land_black.png);
}
.device-mockup.ipad_pro.landscape.silver > .device {
  background-image: url(ipad_pro/ipad_pro_land_silver.png);
}
.device-mockup.ipad_pro.landscape.gold > .device {
  background-image: url(ipad_pro/ipad_pro_land_gold.png);
}
.device-mockup.ipad_pro.portrait > .device > .screen,
.device-mockup.ipad_pro > .device > .screen {
  top: 7.025723%;
  bottom: 6.854341%;
  left: 5.15995%;
  right: 5.15995%;
}
.device-mockup.ipad_pro.landscape > .device > .screen {
  top: 5.177551%;
  bottom: 5.177551%;
  left: 6.945988%;
  right: 6.945988%;
}
.device-mockup.ipad_pro.portrait > .device > .button,
.device-mockup.ipad_pro > .device > .button {
  display: block;
  top: 94.9%;
  bottom: 1.5%;
  left: 47.3%;
  right: 47.1%;
}
.device-mockup.ipad_pro.landscape > .device > .button {
  display: block;
  top: 47.5%;
  bottom: 47.5%;
  left: 94.8%;
  right: 1.5%;
}
.device-mockup.galaxy_s3,
.device-mockup.galaxy_s3.portrait {
  padding-bottom: 178.787879%;
}
.device-mockup.galaxy_s3.landscape {
  padding-bottom: 55.9322034%;
}
.device-mockup.galaxy_s3.black > .device,
.device-mockup.galaxy_s3.portrait.black > .device,
.device-mockup.galaxy_s3 > .device {
  background-image: url(galaxy_s3/s3_port_black.png);
}
.device-mockup.galaxy_s3.landscape.black > .device,
.device-mockup.galaxy_s3.landscape > .device {
  background-image: url(galaxy_s3/s3_land_black.png);
}
.device-mockup.galaxy_s3.portrait.white > .device,
.device-mockup.galaxy_s3.white > .device {
  background-image: url(galaxy_s3/s3_port_white.png);
}
.device-mockup.galaxy_s3.landscape.white > .device {
  background-image: url(galaxy_s3/s3_land_white.png);
}
.device-mockup.galaxy_s3.portrait > .device > .screen,
.device-mockup.galaxy_s3 > .device > .screen {
  top: 12.3728814%;
  bottom: 15.5367232%;
  left: 13.8383838%;
  right: 13.8383838%;
}
.device-mockup.galaxy_s3.landscape > .device > .screen {
  top: 13.8383838%;
  bottom: 13.8383838%;
  left: 12.3728814%;
  right: 15.5367232%;
}
.device-mockup.galaxy_s5,
.device-mockup.galaxy_s5.portrait {
  padding-bottom: 194.188862%;
}
.device-mockup.galaxy_s5.landscape {
  padding-bottom: 51.496259%;
}
.device-mockup.galaxy_s5.black > .device,
.device-mockup.galaxy_s5.portrait.black > .device,
.device-mockup.galaxy_s5 > .device {
  background-image: url(galaxy_s5/galaxy_s5_port_black.png);
}
.device-mockup.galaxy_s5.landscape.black > .device,
.device-mockup.galaxy_s5.landscape > .device {
  background-image: url(galaxy_s5/galaxy_s5_land_black.png);
}
.device-mockup.galaxy_s5.portrait.white > .device,
.device-mockup.galaxy_s5.white > .device {
  background-image: url(galaxy_s5/galaxy_s5_port_white.png);
}
.device-mockup.galaxy_s5.landscape.white > .device {
  background-image: url(galaxy_s5/galaxy_s5_land_white.png);
}
.device-mockup.galaxy_s5.portrait > .device > .screen,
.device-mockup.galaxy_s5 > .device > .screen {
  top: 10.2%;
  bottom: 10.1%;
  left: 6.3%;
  right: 6.4%;
}
.device-mockup.galaxy_s5.landscape > .device > .screen {
  top: 6.6%;
  bottom: 6.2%;
  left: 10.15%;
  right: 10%;
}
.device-mockup.galaxy_tab4,
.device-mockup.galaxy_tab4.landscape {
  padding-bottom: 72.689464%;
}
.device-mockup.galaxy_tab4.black > .device,
.device-mockup.galaxy_tab4.landscape.black > .device,
.device-mockup.galaxy_tab4 > .device {
  background-image: url(galaxy_tab4/galaxy_tab4_land_black.png);
}
.device-mockup.galaxy_tab4.landscape.white > .device,
.device-mockup.galaxy_tab4.white > .device {
  background-image: url(galaxy_tab4/galaxy_tab4_land_white.png);
}
.device-mockup.galaxy_tab4.landscape > .device > .screen,
.device-mockup.galaxy_tab4 > .device > .screen {
  top: 11.5%;
  bottom: 11.5%;
  left: 5.4%;
  right: 5.2%;
}
.device-mockup.lumia920,
.device-mockup.lumia920.portrait {
  padding-bottom: 172.796353%;
}
.device-mockup.lumia920.landscape {
  padding-bottom: 56.3330381%;
}
.device-mockup.lumia920.portrait > .device,
.device-mockup.lumia920 > .device {
  background-image: url(lumia920/lumia920_port.png);
}
.device-mockup.lumia920.landscape > .device {
  background-image: url(lumia920/lumia920_land.png);
}
.device-mockup.lumia920.portrait > .device > .screen,
.device-mockup.lumia920 > .device > .screen {
  top: 10.6420405%;
  bottom: 18.9973615%;
  left: 13.5258359%;
  right: 13.5258359%;
}
.device-mockup.lumia920.landscape > .device > .screen {
  top: 12.2641509%;
  bottom: 12.2641509%;
  left: 10.5403012%;
  right: 18.6005314%;
}
.device-mockup.nexus7,
.device-mockup.nexus7.portrait {
  padding-bottom: 156.521739%;
}
.device-mockup.nexus7.landscape {
  padding-bottom: 63.6678201%;
}
.device-mockup.nexus7.portrait > .device,
.device-mockup.nexus7 > .device {
  background-image: url(nexus7/nexus7_port.png);
}
.device-mockup.nexus7.landscape > .device {
  background-image: url(nexus7/nexus7_land.png);
}
.device-mockup.nexus7.portrait > .device > .screen,
.device-mockup.nexus7 > .device > .screen {
  top: 13.1365741%;
  bottom: 12.7893519%;
  left: 13.7681159%;
  right: 13.7681159%;
}
.device-mockup.nexus7.landscape > .device > .screen {
  top: 13.7681159%;
  bottom: 13.7681159%;
  left: 13.0911188%;
  right: 13.0911188%;
}
.device-mockup.surface,
.device-mockup.surface.landscape {
  padding-bottom: 64.7584973%;
}
.device-mockup.surface.landscape > .device,
.device-mockup.surface > .device {
  background-image: url(surface/surface.png);
}
.device-mockup.surface.landscape > .device > .screen,
.device-mockup.surface > .device > .screen {
  top: 14.5488029%;
  bottom: 14.9171271%;
  left: 9.36195587%;
  right: 9.36195587%;
}
.device-mockup.samsung_tv,
.device-mockup.samsung_tv.landscape {
  padding-bottom: 64.68%;
}
.device-mockup.samsung_tv.landscape > .device,
.device-mockup.samsung_tv > .device {
  background-image: url(samsung_tv/samsung_tv.png);
}
.device-mockup.samsung_tv.landscape > .device > .screen,
.device-mockup.samsung_tv > .device > .screen {
  top: 2.148803%;
  bottom: 12.817127%;
  left: 1.261956%;
  right: 1.361956%;
}