/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
*/




@charset "utf-8";
/* CSS Document */


p{
	margin: 0 0 20px 0;	
}

p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
    color: aliceblue;
    
}

img{
	border: 0;
}

h1, #pixels{
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	font-weight:700;
	font-style:normal;
}

h2{
	
	font-size-adjust:0.531;
	font-weight:400;
	font-style:normal;
    color: white;
}

 h1, #pixels{
	color: #48941A;
}

.float-left{
	float: left;	
	margin: 0 0 0 20px;
    
}

.float-right{
	float: left;
	margin: 0 20px 0 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
}

#nav li{
	margin: 0 0 15px 0;	
}

#intro, #second{
	width: 100%;
}

#intro{   
	background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;	
    /*background:#fff;**/
	height: 880px;
	margin: 0 auto;
    overflow: hidden;
	padding: 0;       
	padding: 0;  
    width: 100%; 
}


#intro .bg{
    width: 800px;
	background: url(images/glow_web.png) 50% 0 no-repeat fixed;
	height: 880px;
	margin: 0 auto;
	padding: 0;
	position: absolute;	
	z-index: 199;
    
}
#intro .story{
	margin: 0 auto;	
	overflow: auto;
	width: 53%;
    height: 50%;
    overflow-x: hidden;
   
}

.cont_intro{
    font-size: 13px;
    position: absolute;
    padding-top: 130px;
    padding-left: 30px;
    width:550px;
    height: 500px
   
}




#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat  fixed;
	height: 1609px;
	margin: 0 auto;
	overflow: hidden;	
    padding: 10px 0 0 0;	
    width: 100%;    
    font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
   
    
}
#second .bg{ 
    width: 800px;
	background: url(images/poliedros_2.png) 50% 0 no-repeat fixed;
	height: 1609px;
	margin: 0 auto;
	padding: 0;
	position: absolute;	
	z-index: 200;
}


#second .story{
	margin: 0 auto;	
	overflow: auto;
	width: 55%;
    height: 100%;
    overflow-x: hidden;    
    min-width: 900px;
}



.titulo_pag_servicio{
    color :#000;
    font-size: 35px;
    position: absolute;
    padding-top: 50px;
    padding-left:35px;
    width:550px;
    height: 150px ;
    text-align: left;
}

.subtitulo_pag_servicio{
    color :#000;
    font-size: 18px;
    position: absolute;
    padding-top: 100px;
    padding-left:35px;
    width:600px;
    height: 50px ;
    text-align: left;
}


.bloque_vr {     
    width: 100%;
    height: 450px; 
    margin-top: 10px;
    float: right;
    background: url(images/ar_vr.png) no-repeat right;
}

.bloque_vr img{  
    float: right;
}

.bloque_juegos {     
    width: 100%;
    height: 450px;
    margin-top: 10px;
    float: left;
    background: url(images/aplicaciones_juegos.png) no-repeat left;
}
.bloque_juegos img{  
    float: left;
}

.bloque_especiales {    
    width: 100%;
    height: 450px;   
    margin-top: 10px;
    float: right;    
    background: url(images/juegos_especiales.png) no-repeat right;
}

.bloque_especiales img{  
    float: right;
}


.texto_izq {    
    padding-top:150px;
    padding-left:30px;      
    width: 450px;
    height: 210px;
    float: left;
    
}

.texto_izq  span{     
    float: left;
    width: 355px;
}

.texto_der {     
    margin-top:150px;
    margin-left:30px; 
    width: 450px;
    height: 210px;
    float: right;
}

.texto_der  span{ 
    float: right;
    width: 355px;
}

.contenido{ 
   font-size: 22px; 
    
}

.titulo_negro { 
    font-weight:bold;
    color: #000;
    float: left;
    padding-top: 10px;
    }


.titulo_blanco{ 
    font-weight:bold;
    color: #fff;
    float: left;
    padding-top: 10px;
    }


.titulo_azul { 
    padding-top: 10px;
    font-weight:bold;    
    color: #0597cb;
    float: left;
    }




#third{
	background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
	color: white;
    min-height: 880px; 
	height: 100%;
	padding-top: 56px;	
    padding-bottom: 56px;	
    width: 100%;
    text-align: center;
     background-color: white;
    
}

#third .story{
	margin: 0 auto;	
	overflow: auto;
	width: 100%;
    overflow-x: hidden;
    padding-left: 70px;
    padding-right:70px;
    padding-top: 150px;
    padding-bottom: 150px;
}

#third .bg{ 
    width: 800px;
	background: url(images/poliedros_3.png) 50% 0 no-repeat fixed;
	height: 409px;
	margin: 0 auto;
	padding: 0;
	position: absolute;	
	z-index: 202;
    background-color: white;
}


#fifth{
	background: #fff;
	min-height: 950px; 
	margin: 0 auto;
	padding: 40px 0 0 0;
}

#fifth .story{
	margin: 0 auto;	
	overflow: auto;
	width: 60%;
    overflow-x: hidden;
    padding-left: 70px;
    padding-right:70px;
    padding-top: 150px;
    padding-bottom: 150px;
}





.titulo_centrado{
    color :#000;
    font-size: 13px;
    position: absolute;
    padding-top: 50px;
    padding-left: 30px;
    width:550px;
    height: 500px  
    
}





#intro .persona{
    width: 90%;
	background: url(images/persona.png);
	height: 748px;
	margin: 0 auto;
	padding: 0;
	position: absolute;	
	z-index: 200;
    
}








.titulo_pagina_3{
    color :#fff;
    font-size: 35px;
    position: absolute;
    padding-top: 0px;   
    width:350px;
    height: 150px ;
    
  
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 950px;	
}


////////////////////////* pagina contacto *///////////////////////

.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	font: bold 16px sans-serif;
	text-align: left;

	padding: 50px 60px 40px;
	margin-top: 80px;
	overflow: hidden;
}

/* Footer left */

.footer-distributed .footer-left{
	float: left;
}

/* The company logo */

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0 0 10px;
}

.footer-distributed h3 span{
	color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer social icons */

.footer-distributed .footer-icons{
	margin-top: 40px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* Footer Right */

.footer-distributed .footer-right{
	float: right;
}

.footer-distributed .footer-right p{
	display: inline-block;
	vertical-align: top;
	margin: 15px 42px 0 0;
	color: #ffffff;
}

/* The contact form */

.footer-distributed form{
	display: inline-block;
}

.footer-distributed form input,
.footer-distributed form textarea{
	display: block;
	border-radius: 3px;
	box-sizing: border-box;
	background-color:  #1f2022;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
	border: none;
	resize: none;

	font: inherit;
	font-size: 14px;
	font-weight: normal;
	color:  #d1d2d2;

	width: 400px;
	padding: 18px;
}

.footer-distributed ::-webkit-input-placeholder {
	color:  #5c666b;
}

.footer-distributed ::-moz-placeholder {
	color:  #5c666b;
	opacity: 1;
}

.footer-distributed :-ms-input-placeholder{
	color:  #5c666b;
}


.footer-distributed form input{
	height: 55px;
	margin-bottom: 15px;
}

.footer-distributed form textarea{
	height: 100px;
	margin-bottom: 20px;
}

.footer-distributed form button{
	border-radius: 3px;
	background-color:  #33383b;
	color: #ffffff;
	border: 0;
	padding: 15px 50px;
	font-weight: bold;
	float: right;
}

/******************************************/

/*
@media screen and (max-width:  1200px)  {   
    #intro{
        height: 880px;      
        background:url(images/firstBG_mobile.jpg) 50% 0 no-repeat fixed;
    }   

    #intro .story{
        margin: 0 auto;	
        overflow: auto;
        width: 90%;
        height:100%;
        overflow-x: hidden;   
    }
    
    #intro .bg {  
         background: url(images/glow_mobile.png) 50% 0 no-repeat fixed;          
         height: 880px;
         width: 90%;
    } 

    
    #intro p, #intro h2, #second  p, #second h2, #third p, #third h2, #fifth p, #fifth h2{
        width: 340px;  
        loat: none;
    } 

    #second .story{	
        width: 90%;
        height: 100%;
        overflow-x: hidden; 
        min-width: 600px;
    }
    #second .bg{	 
        width: 90%;
    }   

    .texto_der {        
        margin-left:30%;       
    }
    
    .footer-distributed {
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-company-name{
		font-size: 12px;
	}

	.footer-distributed form input,
	.footer-distributed form textarea{
		width: 250px;
	}

	.footer-distributed form button{
		padding: 10px 35px;
	}
} 

*/
/******************************************/

@media (max-width: 1000px)  {
    .logo img{ 
        width: 180px;
        height: 110px;
    }
   
    #intro{   
        background:url(images/firstBG_mobile.jpg) 50% 0 no-repeat fixed;	
        /*background:#fff;**/
        height: 1550px;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;       
        padding: 0;  
        width: 100%; 
    }


    #intro .bg{
        width: 90%;
        background: url(images/glow_mobile.png) 50% 0 no-repeat fixed;
        height: 1550px;
        margin: 0 auto;
        padding: 0;
        position: absolute;	
        z-index: 199;
    }
    
    
    #intro .story{
        margin: 0 auto;	
        overflow: auto;
        width: 100%;
        height: 1550px;
        overflow-x: hidden;
        
    }
    
 
    .titulo_intro{
        height: 30px;
        width: 200px;
        font-size: 15px;
        position: absolute;
    }
    
    #second {
         height: 2350px;
       background: none;
        padding: 0px;
        margin: 0px;
     } 
    #second .story{	
        width:100%;
        height: 100%;
        overflow-x: hidden; 
        overflow-y: hidden; 
        min-width: 600px;
        padding: 0px;
        margin: 0px;
      
    }   
    #second .bg{
        width:90%;
    }
    
    
    .bloque_vr{             
        background: url(images/ar_vr_mobile.png) no-repeat right;
        background-position: left top;  
        height: 650px;
        padding: 0px;
        margin: 0px;
        width: 100%;
    
    }
    
    
    
    .f_vr{         
        margin:230px 0px 0px 0px ;
        padding: 0px;
        width: 100%;
        height: 550px;
       
    }
    
    .titulo_pag_servicio{
        margin-top: 60px;
        font-size: 50px;
    }
    
     .bloque_juegos{
        background: url(images/juegos_mobile.png) no-repeat right;
        background-position: right top; 
        height:700px;
        padding: 0px;
        margin: 0px;
        width: 100%;
    }
    

   
    .bloque_especiales {
        background: url(images/especiales_mobile.png) no-repeat right;
        background-position: left top; 
        height: 600px;
    }
    
    .titulo_negro { 
        font-weight:bold;
        font-size: 50px;
        color: #000;
        float: left;
        padding-top: 10px;
        letter-spacing:-2px;
    }


    .titulo_blanco{ 
        font-weight:bold;
        font-size: 40px;
        color: #fff;
        float: left;
        padding-top: 10px;
        letter-spacing:-2px;
    }


    .titulo_azul { 
        padding-top: 10px;
        font-size: 50px;
        font-weight:bold;    
        color: #0597cb;
        float: left;
         letter-spacing:-2px;
    }
    
    
    .texto_der  {  
        width: 100%;
        text-align: justify;   
        padding-left:0px;  
        margin-left: 0px; 
        margin-top:0px;        
    }
     .texto_der span { 
        padding: 10px;
        font-size:44px;   
        width: 65%;        
        margin-top: 0px;
        float: left;
    } 
    
    .texto_der  img {  
        display: none;
    }
    .texto_izq  {  
        width: 100%;
        text-align: justify;        
        padding: 0px;
        margin:0px;
        height: 600px;
        
    }    
        
    .texto_izq span { 
        padding: 10px;
        font-size:44px;   
        width: 65%; 
        float: right;
        
       
    }    
    .texto_izq  img {  
        display: none;
    } 
	.footer-distributed{
		padding: 30px;
	}
	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		float: none;
		max-width: 300px;
		margin: 0 auto;
	}

	.footer-distributed .footer-left{
		margin-bottom: 40px;
	}

	.footer-distributed form{
		margin-top: 30px;
	}

	.footer-distributed form{
		display: block;
	}

	.footer-distributed form button{
		float: none;
	}
}