* {
	margin:0;
	padding:0;
	text-decoration:none;
	list-style: none;
	box-sizing: border-box;
}
body {
	background: #4e54c8;  
	background-image: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);  
	background-image: linear-gradient(to right, #8f94fb, #4e54c8); 
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 100;	
	-webkit-font-smoothing: antialiased;
}
#container {
	width: 750px;
	max-width: 1170px;
	height: 500px;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	
	margin-left:auto;
	margin-right:auto;
	padding-left:15px;
	padding-right:15px;
}
.caja {
	width: 600px;
	margin: 0% auto;
}
.pantalla {
	width: 600px;
	height: 400px;
	position: relative;
	display: block;
	background-color: #3a3636;
	border-radius: 15px 15px 0 0;
	border-top: 3px solid #9a9292;
	border-right: 3px solid #9a9292;
	border-left: 3px solid #9a9292;
}
.ventana {
	width: 540px;
	height: 320px;
	background-color: #323C4D;
	box-shadow: inset 0px 0px 6px #222;
	overflow: hidden;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.pestanaUno {
	width: 80px;
	height: 3px;
	position: absolute;
	top: 0px;
	left: 70px;
	background-color: black;
}
.pestanaDos {
	width: 80px;
	height: 3px;
	position: absolute;
	top: 0px;
	right: 70px;
	background-color: black;
}
ul.camara {
	width: 100%;
	height: 39px;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.camara li {
	margin: 10px;
	text-align: center;
	position: relative;
}
.c1 {
	width: 3px;
    height:3px;
    border-radius: 100%;
    background:black;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.c2 {
	width: 15px;
    height:15px;
    border-radius: 100%;
    background:black;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.c3 {
	width: 5px;
    height:5px;
    border-radius: 100%;
    background: black;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	
	-webkit-animation: lights-animation 1s ease-in-out;
	-moz-animation: lights-animation 1s ease-in-out;
	-o-animation: lights-animation 1s ease-in-out;
	animation: lights-animation 1s ease-in-out;
	animation-iteration-count: 2;
	animation-direction: alternate-reverse;  
}
.c4 {
	width: 3px;
    height:3px;
    border-radius: 100%;
    background:black;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.nombre {
	height: 38px;
    line-height: 38px;
    text-align: left;
    font-style: italic;
    position: absolute;
    left: 27px;
    bottom: 0;
}
.nombre a {
	color: #9a9292;
}
.base {
	width: 100%;
	overflow: hidden;
	border-radius: 2px 2px 10px 10px;
	background: #6d6868;
}
.base:before {
	display: block;
	content: '';
	padding-top: 1.5%;
	border-radius: 0 0 10px 10px;
}
.base:after {
	content: '';
	display: block;
	padding-top: 1%;
	background-color: #B3B3B3;
}
.leno-apps {
	width: 60%;
	display: flex;
	justify-content: center;
	position: absolute;
	left:0;
	right:0;
	margin: 0% auto;
	bottom:-60px;
	-webkit-animation-name: apps; 
	-webkit-animation-duration: 1s; 
	animation-name: apps;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
.leno-app {
	width: 10%;
	margin: 10px;
	text-align: center;
	padding-top: 10%;
	border-radius: 20%;
	box-shadow:  2px 2px 0px 2px rgba(26, 32, 43, 0.5);
	transition: all 0.3s ease-in-out .5s;
}
.leno-app:hover {
	transform: scale(1.2) rotateZ(20deg) translateY(-3px);
}
.pantalla .leno-app:nth-of-type(1) {
  background-color: #ffffff;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI5NyAyOTciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5NyAyOTciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgogIDxnPgogICAgPHBhdGggZD0ibTk3LjY3NCw5NC40OTNjMC4wNTktMC4wMiA1LjYzNy0xLjczMyA1LjYzNy0xLjczMyA0LjAwNy0xLjIzIDguMjc1LDAuODk0IDkuNzEsNC44MzJsNy42MzUsMjAuOTUgNy42MzUtMjAuOTUxYzEuNDM3LTMuOTM4IDUuNzEyLTYuMDYgOS43MS00LjgzMSAwLDAgNS41NzgsMS43MTMgNS42MzcsMS43MzMgOC4zMTQsMi43NyAxNC4yMjksOS45MTMgMTUuNTQ5LDE4LjM3di02Mi4xMDNjMC0zLjE4MS0yLjU3OS01Ljc2LTUuNzYtNS43NmgtNjUuNTQyYy0zLjE4MSwwLTUuNzYsMi41NzktNS43Niw1Ljc2djYyLjEwM2MxLjMyLTguNDU3IDcuMjM1LTE1LjU5OSAxNS41NDktMTguMzd6bTIyLjk4Mi00MS4xMjZjMTAuMjM1LDAgMTguNTYzLDguMzI3IDE4LjU2MywxOC41NjMgMCwxMC4yMzUtOC4zMjcsMTguNTYzLTE4LjU2MywxOC41NjNzLTE4LjU2My04LjMyNy0xOC41NjMtMTguNTYzYzAuMDAxLTEwLjIzNiA4LjMyOC0xOC41NjMgMTguNTYzLTE4LjU2M3oiIGZpbGw9IiMwMDAwMDAiLz4KICAgIDxwYXRoIGQ9Im0xNDAuNDI1LDExMC4yOTdsLTguNTE2LDIzLjM2N2gxMS44MXYtMTcuMjA5Yy0yLjg0MjE3ZS0xNC0yLjUyLTEuMjY5LTQuODEtMy4yOTQtNi4xNTh6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICA8cGF0aCBkPSJtOTcuNTk0LDExNi40NTV2MTcuMjA5aDExLjgxbC04LjUxNi0yMy4zNjdjLTIuMDI1LDEuMzQ4LTMuMjk0LDMuNjM4LTMuMjk0LDYuMTU4eiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPHBhdGggZD0ibTI0OS4zNzUsMGgtMjAxLjc1Yy01Ljc5OSwwLTEwLjUsNC43MDEtMTAuNSwxMC41djI3NmMwLDUuNzk5IDQuNzAxLDEwLjUgMTAuNSwxMC41aDIwMS43NWM1Ljc5OSwwIDEwLjUtNC43MDEgMTAuNS0xMC41di0yNzZjMC01Ljc5OS00LjcwMS0xMC41LTEwLjUtMTAuNXptLTE4MywzNy4xMjVjMC00LjM0OSAzLjUyNi03Ljg3NSA3Ljg3NS03Ljg3NWg5Mi44MTJjNC4zNSwwIDcuODc1LDMuNTI2IDcuODc1LDcuODc1djEwNC40MTRjMCw0LjM0OS0zLjUyNSw3Ljg3NS03Ljg3NSw3Ljg3NWgtOTIuODEyYy00LjM0OSwwLTcuODc1LTMuNTI2LTcuODc1LTcuODc1di0xMDQuNDE0em0xNTYuMzc1LDIxMi4wNjNoLTE0OC41Yy00LjM0OSwwLTcuODc1LTMuNTI2LTcuODc1LTcuODc1czMuNTI2LTcuODc1IDcuODc1LTcuODc1aDE0OC41YzQuMzQ5LDAgNy44NzUsMy41MjYgNy44NzUsNy44NzVzLTMuNTI2LDcuODc1LTcuODc1LDcuODc1em0wLTU1LjY4OGgtMTQ4LjVjLTQuMzQ5LDAtNy44NzUtMy41MjYtNy44NzUtNy44NzVzMy41MjYtNy44NzUgNy44NzUtNy44NzVoMTQ4LjVjNC4zNDksMCA3Ljg3NSwzLjUyNiA3Ljg3NSw3Ljg3NXMtMy41MjYsNy44NzUtNy44NzUsNy44NzV6bTAtNzQuMjVoLTE4LjU2M2MtNC4zNDksMC03Ljg3NS0zLjUyNi03Ljg3NS03Ljg3NXMzLjUyNi03Ljg3NSA3Ljg3NS03Ljg3NWgxOC41NjNjNC4zNDksMCA3Ljg3NSwzLjUyNiA3Ljg3NSw3Ljg3NXMtMy41MjYsNy44NzUtNy44NzUsNy44NzV6bTAtMzcuMTI1aC0xOC41NjNjLTQuMzQ5LDAtNy44NzUtMy41MjYtNy44NzUtNy44NzVzMy41MjYtNy44NzUgNy44NzUtNy44NzVoMTguNTYzYzQuMzQ5LDAgNy44NzUsMy41MjYgNy44NzUsNy44NzVzLTMuNTI2LDcuODc1LTcuODc1LDcuODc1eiIgZmlsbD0iIzAwMDAwMCIvPgogIDwvZz4KPC9zdmc+Cg==);
  background-position: center; 
  background-repeat: no-repeat ;
}
.pantalla .leno-app:nth-of-type(2) {
  background-color: #6BAC92;
}
.pantalla .leno-app:nth-of-type(3) {
  background-color: #D98F34;
}
.pantalla .leno-app:nth-of-type(4) {
  background-color: #8B92AC;
}
.pantalla .leno-app:nth-of-type(5) {
  background-color: #CA4549;
}
.pantalla .leno-app:nth-of-type(6) {
  background-color: #6BAC92;
}
.pantalla .leno-app:nth-of-type(7) {
  background-color: #D98F34;
}
button {
	position: absolute;
    width: fit-content;
    left: 0;
    right: 0;
    margin: 5% auto;
}

label {
	text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 5% auto;
}
@-webkit-keyframes apps {
  from {bottom: -60px;}
  to {bottom: 0;}
}
@keyframes apps {
  from {bottom: -60px;}
  to {bottom: 0;}
}
@-webkit-keyframes lights-animation {
  0% {background-color: #323a32;}
  20% {background-color: #485d48;}
  80% {background-color: #30c130;}
  100% {background-color: #09f909;}
}
@-moz-keyframes lights-animation {
  0% {background-color: #323a32;}
  20% {background-color: #485d48;}
  80% {background-color: #30c130;}
  100% {background-color: #09f909;}
}
@-o-keyframes lights-animation {
  0% {background-color: #323a32;}
  20% {background-color: #485d48;}
  80% {background-color: #30c130;}
  100% {background-color: #09f909;}
}
@keyframes example {
  0% {background-color: #323a32;}
  20% {background-color: #485d48;}
  80% {background-color: #30c130;}
  100% {background-color: #09f909;}
}