*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'raleway';
	background-color: rgba(0,0,0,.9);
	
}

.header{
	background-color:black;
	position: fixed;
	z-index: 1001;
	height: 80px;
	width: 100%;
	box-shadow: 0px 17px 40px 1px black ;
	z-index: 9999;
	opacity: 0;

}
.header .logo{
	
	left: 50%;
	width: 100px;
	height: 80px;
	top: 50%;
	transform: translate(-50%, -25%);
	text-align: center;
	cursor: pointer;
	opacity: 1;
	position: absolute;
}
.header .logo img{
	width: 100%;
}

.back{
	width: 100px;
	height: 80px;
	left: 5%;
	top: 25%;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	position: absolute;	
}

.back p{
	font-size: .7em;
	color: white;
}

.back img{
	width: 30%;
}
.next{
	right: 5%;
	top: 25%;
	width: 100px;
	height: 80px;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	position: absolute;
}
.next p{
	font-size: .7em;
	color: white;
}
.next img{
	width: 30%;
}




.preloader1{
	position: fixed;
	background-color: #000;
	color: #FFFDE7;
	width: 30%;
	height: 100vh;
	z-index: 999;
	
}

.preloader1 .title{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	font-size: 4em;
	font-weight: 800;
}


.preloader2{
	position: absolute;
	background-color:  #121212;
	width: 70%;
	height: 100vh;
	left: 30%;
	color: #FFFDE7;
	z-index: 100;
}

.preloader2 #box{
	position: absolute;
	display: block;
	font-size: 1.7em;
}
		
		.apps{
			top: 15%;
			left: 25%;
			transform: translate(-50%,-50%);
		}

		.web{
			top: 40%;
			left: 50%;
			transform: translate(-50%,-50%);
		}

		.ecommerce{
			top: 20%;
			left: 70%;
			transform: translate(-50%,-50%);
		}

		.backend{
			top: 50%;
			left: 20%;
			transform: translate(-50%,-50%);
		}

		.rss{
			top: 65%;
			left: 65%;
			transform: translate(-50%,-50%);
		}

		.seosem{
			top: 80%;
			left: 40%;
			transform: translate(-50%,-50%);
		}


.text{
	position: relative;
	z-index: 3;
}

.line{
	height: 4px;
	background-color: #FFFDE7;
	width: 115%;
	position: absolute;
	left: -15%;
	z-index: 3;
}



.contenido{
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	display: flex;
}

.phone{
	margin-top: 5%;
	width: 270px;
	height: 480px;
	position: relative;
	background: #020c17;
	transform: scale(1);
}

.top{
	position: absolute;
	top: -50px;
	width: 100%;
	height: 50px;
	background-color: white;
	border-top-left-radius:  50px;
	border-top-right-radius:  50px;
}

.top:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 35%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background-color: #ccc;
	border: 2px solid #aaa;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #999;
}
.top:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 40px;
	height: 3px;
	background-color: #333;
	border: 2px solid #aaa;
	border-radius: 3px;
	
}

.bot{
	position: absolute;
	bottom: -50px;
	width: 100%;
	height: 50px;
	background-color: white;
	border-bottom-left-radius:  50px;
	border-bottom-right-radius:  50px;
}

.bot:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 15px;
	height: 15px;
	border: 2px solid #999;
	cursor: pointer;
	border-radius: 6px;
}

.pantalla{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	
}

.options{
	width: 100%;
	color: #FFFDE7;
	position: absolute;
	text-align: center;
	top: 35%;
	opacity: 0;
	transition: 0.5s;
}

.options.active{
	opacity: 1;
	transition: 0.5s;
}
		
		.elige{
			position: absolute;
			top: 0%;
			left: 50%;
			transform: translateX(-50%);
			font-weight: 600;
			word-spacing: 3px;
			width: 100%;
		}

		.iu_buton{
			 
			padding: 3px 22px;
			border: 2px solid white;
			position: absolute;
			left: 50%;
			top: 45%;
			transform: translateX(-50%);
			color: white;
			background-color: #2e86c1;
			font-weight: 800;
			letter-spacing: 4px;
			cursor: pointer;
			z-index: 2;
			opacity: 0;
			transition: 0.5s;
			font-family: 'raleway';
		}

		.iu_buton.active{
			opacity: 1;
			transition: 0.5s;
		}

		.ux_buton{
			 
			padding: 3px 18px;
			border: 2px solid white;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 55%;
			color: white;
			background-color: #cb4335;
			font-weight: 800;
			letter-spacing: 4px;
			cursor: pointer;
			z-index: 2;
			opacity: 0;
			transition: 0.5s;
			font-family: 'raleway';			
		}
		.ux_buton.active{
			opacity: 1;
			transition: 0.5s;
		}

.on{
	color: white;
	z-index: 1;
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	opacity: .8;
}

.on.active p{
	opacity: 0;
	transition: .5s;
}

.on.active{
	opacity: 0;
	transition: .5s;
}

.on i{
	font-size: 1.8em;
	margin-top: 15%;
}
.pantalla img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: 0.5s;
}

.pantalla.active img{
	opacity: 1;
}

.pantalla:before{
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.1);
	z-index: 1;
	transform: skewX(-5deg);
}


h2{
	color: #fff;
	font-weight: 200;
	font-size: 3.5em;
	z-index: 1;
	transform: translateY(50px);
	line-height: 0.4em;
	transition: 0.5s;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
	opacity: 0;

}

h2 span{
	font-size: 0.4em;
}

.pantalla.active h2{
	transform: translateY(35px);
	opacity: 1;
	transition-delay: 0.5s;
}

.pantalla ul {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	z-index: 1;
	width: 100%;
}

.pantalla ul li{
	list-style: none;
	color: #fff;
	font-size: 1.5em;
	padding-bottom: 10px;
	cursor: pointer;
	transition: 0.5s; 
	opacity: 0;
	transform: translateY(20px);

}

.pantalla.active ul li{
	opacity: 1;
	transition-delay: 0.5s;
	transform: translateY(0px);
}

.pantalla.active ul li:nth-child(2){
	transition-delay: .7s; 
}
.pantalla.active ul li:nth-child(3){
	transition-delay: .9s; 
}
.pantalla.active ul li:nth-child(4){
	transition-delay: 1.1s; 
}

.pantalla.active ul li .fas{
	transition: 0.5s;
}

.pantalla.active ul li:hover .fas{
	transform: translateY(-10px);
}
.pantalla.active ul li .fab{
	transition: 0.5s;
}

.pantalla.active ul li:hover .fab{
	transform: translateY(-10px);
}




.phone_content{
	margin-left: 10%;
	width: 30%;
	margin-top: 7%;
}

.phone_content p{
	color: #FFFDE7;
	font-size: 1.3em;
	margin-bottom: 15%;
}

.phone_content .iu p{
	font-weight: 700;
	font-size: 3em;
}

.phone_content .iu p:nth-child(1){
	color:  #2e86c1 ;
}

.phone_content .iu p:nth-child(2){
	color: #cb4335  ;
}



.line{

}


/**/

/*.contenido{
	position: relative;
	
	
	
}


.content{
	
	width: 50%;
	height: 75%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	transition: 0.5s;
	
	
	left: 50%;
	top: 150px;
	width: 10%;
	height: 310px;
	background: url(../images/phone.png);
	background-size: 100%;
	background-repeat: no-repeat;
	transform:  scale(1.3)rotate(-30deg) skew(25deg);
	
}

.content img{
	width: 100%;
	position: absolute;
	transition: .7s;
}

.content:hover img:nth-child(4){
	transform: translate(110px, -110px);
	opacity: 1;
}
.content:hover img:nth-child(3){
	transform: translate(90px, -90px);
	opacity: .8;
}
.content:hover img:nth-child(2){
	transform: translate(70px, -70px);
	opacity: .6;
}
.content:hover img:nth-child(1){
	transform: translate(50px, -50px);
	opacity: .4;
}


*/