/* ********	luismips.net **********************************
*	 Web: 		The remote worker
*	 Version:	1.0
*	 File: 		main.css
*	 Autor:		luismips@gmail.com
***********************************************************/

/* Fonts
**************************************************************************** */

@font-face {
  font-family: 'Adventure';
    src:  url('../fonts/adventure/Adventure-Subtitles-Normal.ttf.woff') format('woff');
 
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'comic';
    src:  url('../fonts/comic/comic.woff') format('woff'); 
    font-weight: normal;
    font-style: normal;
}



html, body {
  height: 100%;
}

body {
	margin:0;
	padding:0;
	background-color: #000000;

	/*overflow: hidden;*/
}
section{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
		
	padding:0;
	margin:0;
	z-index: 3000;
}

/*Background divs for animation
*****************************************************************************/
.stars-container{
	position: fixed;
	width: 3070px;
	height:3070px;
	top: -800px;
	left: -1300px;
	background-size: 100%;
	overflow:hidden;
	
    -webkit-animation: cw-rotation 1000s linear infinite;
    -moz-animation: cw-rotation 1000s linear infinite;
    -ms-animation: cw-rotation 1000s linear infinite;
	
	z-index: 200;
}

#sun{
	position: fixed;
	width: 3070px;
	height:3070px;
	top: -800px;
	left: -1300px;
	background-size: 100%;
	overflow:hidden;
	
    -webkit-animation: cw-rotation 480s linear infinite;
    -moz-animation: cw-rotation 480s linear infinite;
    -ms-animation: cw-rotation 480s linear infinite;
	
	z-index: 300;
}



.earth{
	position: fixed;
	bottom: -220px;
	left: -250px;
	background-image: url("../img/earth.png");
	background-size: 100%;
	width:800px;
	height: 800px;
	
	-webkit-animation: ccw-rotation 500s linear infinite;
    -moz-animation: ccw-rotation 500s linear infinite;
    -ms-animation: ccw-rotation 500s linear infinite;
	
	z-index: 400;
}





/* Zyrokull the assistant
****************************************************************************/

#zyrokull {
	
	position:fixed;
	top:20px;
	right:20px;
	width:200px;
	height: 200px;
	background-image: url("../img/zyrokullV2_verde.png");
	background-size: 90%;
	background-position: top 20px left 20px;/*right 20px bottom 10px;*/
	background-repeat: no-repeat;	
	background-color: rgba(100,100,255,0.7);
	border:5px solid #000000;	
	
	
	-webkit-border-radius: 175px 175px 175px 175px;
	-moz-border-radius: 175px 175px 175px 175px;
	border-radius: 175px 175px 175px 175px;
	
	-webkit-box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	-moz-box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	
	cursor: pointer;
	z-index:5000;
}


.zyro_msg {
	position: fixed;
		
	padding: 20px;
	width: 60%;
	vertical-align: bottom;
	height: auto;
	font-family: 'comic';
	font-size: 16px;
	text-align: center;
	line-height: 1.4;
	border:5px solid #000000;
	-webkit-border-radius: 70px 70px 0px 70px;
	-moz-border-radius: 70px 70px 0px 70px;
	border-radius: 70px 70px 0px 70px;
	background-color:#FDFFCF;
	
	-webkit-box-shadow: #020807 10px 10px 10px;
	-moz-box-shadow: #020807 10px 10px 10px;
	box-shadow: #020807 10px 10px 10px;
	
	z-index:5001;
	
}





/*control, the navbar
*****************************************************************************/
#control{
	
	position: fixed;
	background-color:rgba(72,72,72,0.5);
	top:0px;
	right:0px;
	height:100%;
	width: 180px;
	padding: 10px;
	-webkit-filter: drop-shadow( 0px 0px 20px #FFFFFF );
	filter: drop-shadow( 0px 0px 20px #FFFFFF );
	z-index: 4000;
}

#control ul{
	margin-top: 350px;
	width: 100%;
	font-family: 'Adventure';
	font-size: 16pt;
	color: #FFFFFF;
}



#control li{
	display:block;
	position:relative;
	margin: 20px auto 0 auto;
	height: auto;
	width: 100%;
	text-align: center;
	padding: 5px;
	background-color: rgba(50,50,50,0.5);
	
	-webkit-border-radius: 10px 0px 10px 0px;
	-moz-border-radius: 10px 0px 10px 0px;
	border-radius: 10px 0px 10px 0px;
	
	-webkit-box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	
	cursor: pointer;
}

/*navbar toggle
*********************************************************************/

#trw-logo-wrap{
	position: fixed;
	width: 80px;
	height: 80px;
	top: 235px;
	right: 20px;
		
	-webkit-animation: ccw-rotation 30s linear infinite;
    -moz-animation: ccw-rotation 30s linear infinite;
    -ms-animation: ccw-rotation 30s linear infinite;
	
	cursor: pointer;
	z-index: 10000;
}

.trw-logo {
	fill:#151515;
	fill-opacity:0.9;
	
	-webkit-box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	-moz-box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	box-shadow: 0px 2px 23px 1px rgba(255,255,255,1);
	

}
.trw-logo:hover {
	
		fill-opacity: 1;
		fill:#FFFFFF;
		
}

.trw-logo-circle{
	fill:none;
	stroke:#151515;
	stroke-opacity:0.9;
}

.trw-logo:hover + .trw-logo-circle{
	
		stroke:#FFFFFF;
	stroke-opacity:1;
		
}


#control li:hover{
	background-color: rgba(255,255,255, 0.9); /* Old browsers */
	color: #000000;
}

.control-active{
	background-color: rgba(255,255,255, 0.5); /* Old browsers */
	color: #000000;	
	-webkit-box-shadow: 0px 0px 18px 1px rgba(255,255,0,1);
	-moz-box-shadow: 0px 0px 18px 1px rgba(255,255,0,1);
	box-shadow: 0px 0px 18px 1px rgba(255,255,0,1);
	
}


/*common section wrapper
******************************************************************/
#about, #skills, #works, #contact {
	position:relative;
	width:100%;
	min-height:100%;
	height:auto;
	margin-bottom: 50px;
	z-index: 3000;
}

.introsec{
	position:relative;
	margin: 150px auto 50px auto;
	padding: 20px 20px 20px 20px;
	
	width: 70%;
	height: 80%;
	font-family: 'Adventure';
	color: #FFFFFF;
	text-shadow: 1px 1px 25px rgba(255, 255, 255, 1);
	text-align: center;
	
	
	z-index: 3000;
}
.sub-title{
	margin-top:50px;
}

.introsec h1{
	font-size:62pt;
}

.introsec h3{
	
	font-size:28pt;
}

.introsec h2{
	margin-top: 80px;
	font-size:18pt;
}

.introsec p{
	margin-top: 20px;
	font-size: 14pt;
}






/*about
*****************************************************************************/


#about, #works{
	background-color: rgba(255, 255, 255, 0.1);
}

#luismips{
	position:relative;
	overflow:hidden;
	width: 120px;
	height:120px;
	margin: 20px auto 20px auto;
	background-image: url('../img/luismips.jpg');
	background-size: 100%;
	/*background-position: top 20px left 20px;/*right 20px bottom 10px;*/
	background-repeat: no-repeat;
	border: 3px solid #FFFFFF;
	-webkit-border-radius: 60px 60px 60px 60px;
	-moz-border-radius: 60px 60px 60px 60px;
	border-radius: 60px 60px 60px 60px;
}

#vid{
		width: 118px;
		height:118px;
}


/* Works
*****************************************************************************/
.hex-wrap{
	position: relative;
	display: inline-block;
	margin: 30px auto 10px auto;
	width: 220px;
	height: 220px;
	z-index: 500;
}

.hex{
	position: relative;
	margin-top: 20px;
	width: 220px;
	height: 220px;
	stroke-width:2;
	stroke: #FFFFFF;
	fill-opacity:0.6;
	transition:fill-opacity .8s;
	cursor:pointer;
	
	-webkit-filter: drop-shadow( 0px 0px 10px #FFFFFF );
	filter: drop-shadow( 0px 0px 10px #FFFFFF );
}


.hex-wrap:hover {
  
  animation: grow1 2s forwards;
  -webkit-animation: grow1 2s forwards;
  z-index: 1000;
}

.hex-wrap-inside{
	display:none;
	position:relative;
	margin: -100px auto 5px auto;
	width:90%;
	padding-top:5px;
	height: 80px;
	color: #000000;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 67%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 67%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 67%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.hex-wrap:hover > .hex-wrap-inside{
	display:block;
}

.hex-wrap:hover > .hex{
	fill-opacity:1;
}




.h-text{
  stroke-width:0.5;
  stroke:#FFFFFF;
  fill-opacity:0.8;
  fill:#FFFFFF;
  transition:fill-opacity .8s;
}
.hex:hover > .h-text{
  fill-opacity:1;
  fill:#000000;
}

.hex-wrap-inside p{
	margin-top: 10px;
	color: #FFFFFF;
	
	
}

.hex-wrap-inside div{
	position:relative;
	margin:10px auto 10px auto;
	color: #FFFFFF;
	width: 30px;
	height: 30px;
	padding-top: 10px;
	background-color: rgba(75, 75, 75, 0.8);
	-webkit-border-radius: 15px 0px 15px 0px;
	-moz-border-radius: 15px 0px 15px 0px;
	border-radius: 15px 0px 15px 0px;
   font-size: 10pt;
   vertical-align: middle;
	
}

.hex-wrap-inside  div a{
	margin: 5px;
	color: #FFFFFF;
}

/*CONTACT FORM
**************************************************************************/
#contact-form {
   background-color:rgba(72,72,72,0.5);
   padding: 10px 20px 30px 20px;
   width: 70%;
   max-width:100%;
   
   margin-top:30px;
   margin-left: auto;
   margin-right: auto;
   border-radius:7px;
   -webkit-border-radius:7px;
   -moz-border-radius:7px;
   
   	-webkit-filter: drop-shadow( 0px 0px 10px #FFFFFF );
	filter: drop-shadow( 0px 0px 10px #FFFFFF );
}
#contact-form span{
	float:left;
}

#contact-form input,   
#contact-form select,   
#contact-form textarea,   
#contact-form label { 
   font-size: 15px;  
   margin-bottom: 2px;

	
  /* font-family: Arial, san-serif;*/
} 
#contact-form input,   
#contact-form select,   
#contact-form textarea { 
   width:100%;
         -webkit-filter: drop-shadow( 2px 2px 5px #000000 );
	filter: drop-shadow( 2px 2px 5px #000000 );
   border: 0; 
   -moz-border-radius: 4px;  
   -webkit-border-radius: 4px;  
   border-radius: 4px;
   margin-bottom: 25px;  
   padding: 5px;  
}  
#contact-form input:focus,   
#contact-form select:focus,   
#contact-form textarea:focus {  
   background-color: #EEEEFF; 
}  
#contact-form textarea {
   width:100%;
   height: 150px;
}
#contact-form button {
   cursor:pointer;
   width:100%;
   border:none;
   background:#991D57;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */
   color:#FFF;
   margin:0 0 5px;
   padding:10px;
   border-radius:5px;
   
           -webkit-filter: drop-shadow( 2px 2px 5px #000000 );
	filter: drop-shadow( 2px 2px 5px #000000 );
}
#contact-form button:hover {
   background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   -webkit-transition:background 0.3s ease-in-out;
   -moz-transition:background 0.3s ease-in-out;
   transition:background-color 0.3s ease-in-out;
}
#contact-form button:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
input:required, textarea:required {  
   box-shadow: none;
   -moz-box-shadow: none;  
   -webkit-box-shadow: none;  
   -o-box-shadow: none;  
} 
#contact-form .required {  
   font-weight:bold;  
   color: #E5E6E7;      
}


#failure, #success {
   color: #6EA070; 
   display:none;  
}

@media only screen and (max-width: 580px) {
   #contact-form{
      left: 3%;
      margin-right: 3%;
      width: 88%;
      margin-left: 0;
      padding-left: 3%;
      padding-right: 3%;
   }
}

/*******************************************************************
 * responsive site
 *******************************************************************/
@media only screen and (max-width: 1920px) {
	.stars-container{
		width: 3748px;
		height: 3748px;
		top: -1000px;
		left: -1700px;
	}
	
	.earth{
		width:700px;
		height: 700px;
		bottom: -250px;
		left: -220px;
	}
} 
 
@media only screen and (max-width: 1024px) {
	.stars-container{
		width: 2048px;
		height: 2048px;
		top: -720px;
		left: -880px;
	}
	
	.earth{
		width:700px;
		height: 700px;
		bottom: -450px;
		left: -180px;
	}
	
	#zyrokull{
		right:10px;
		width: 160px;
		height: 160px;
		background-size: 95%;
		background-position: top 10px left 8px;/*right 20px bottom 10px;*/
		
	}
	
	#trw-logo-wrap{
		width: 60px;
		height: 60px;
		top: 190px;
		right: 10px;
	}
	
	.introsec{			
		width: 75%;	
	}
	
	.introsec h1{
		font-size:56pt;
	}

	.introsec h3{
		font-size:24pt;
	}

	.introsec p{
		margin-top: 20px;
		
		font-size: 14pt;
	}
}
/* 900 width ****************************************************** width 900 */
@media only screen and (max-width: 900px) {
	.stars-container{
		width: 1800px;
		height: 1800px;
		top: -550px;
		left: -800px;
	}
	
	.earth{
		width:550px;
		height: 550px;
		bottom: -250px;
		left: -250px;
	}
	
	#zyrokull{
		right:10px;
		width: 120px;
		height: 120px;
		background-size: 90%;
		background-position: top 10px left 8px;/*right 20px bottom 10px;*/
		border:3px solid #000000;	
		-webkit-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		-moz-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
	}
	
	.zyro_msg{
		padding: 15px;
		width: 70%;		
		font-size: 12px;		
		line-height: 1.4;
		border:3px solid #000000;
		-webkit-border-radius: 35px 35px 0px 35px;
		-moz-border-radius: 35px 35px 0px 35px;
		border-radius: 35px 35px 0px 35px;
		
	}
	
	#trw-logo-wrap{
		width: 50px;
		height: 50px;
		top: 150px;
		right: 10px;
	}
	
	#control{	
		
		width: 180px;
		padding: 10px;		

	}

	#control ul{
		margin-top: 220px;
		
	}
	
	.introsec{		
		margin: 100px auto 30px auto;		
		width: 90%;
		height: auto;
		text-shadow: 0px 0px 8px rgba(255, 255, 255, 0);		
	}
	
	#home .introsec{
		margin-top: 150px;
	}
	
	.sub-title{
		margin-top:40px;
	}

	.introsec h1{
		font-size:52pt;
	}

	.introsec h3{
		font-size:22pt;
	}

	.introsec p{
		margin-top: 20px;
		
		font-size: 14pt;
	}
	
	#contact-form{
		  
		  width: 70%;
		  
    }
}
/* 768 width ****************************************************** width 768 */
@media only screen and (max-width: 768px) {
.stars-container{
		width: 1800px;
		height: 1800px;
		top: -600px;
		left: -700px;
	}
	
	.earth{
		width:400px;
		height: 400px;
		bottom: -190px;
		left: -190px;
	}
	
	.sun{
		
	}
	
	#zyrokull{
		right:10px;
		width: 100px;
		height: 100px;
		background-size: 90%;
		background-position: top 10px left 8px;/*right 20px bottom 10px;*/
		border:3px solid #000000;	
		-webkit-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		-moz-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
	}
	
	.zyro_msg{
		padding: 15px;
		width: 70%;		
		font-size: 12px;		
		line-height: 1.4;
		border:3px solid #000000;
		-webkit-border-radius: 35px 35px 0px 35px;
		-moz-border-radius: 35px 35px 0px 35px;
		border-radius: 35px 35px 0px 35px;
		
	}
	
	#trw-logo-wrap{
		width: 50px;
		height: 50px;
		top: 140px;
		right: 10px;
	}
	
	#control{	
		
		width: 180px;
		padding: 10px;		

	}

	#control ul{
		margin-top: 200px;
		
	}
	
	
	.introsec{		
		margin: 80px auto 30px auto;		
		width: 90%;
		height: auto;
		text-shadow: 0px 0px 5px rgba(255, 255, 255, 0);		
	}
	
	#home .introsec{
		margin-top: 130px;
	}
	
	.sub-title{
		margin-top:30px;
	}

	.introsec h1{
		font-size:38pt;
	}

	.introsec h3{
		font-size:19pt;
	}

	.introsec p{
		margin-top: 20px;
		
		font-size: 14pt;
	}
	
	#luismips{
		width: 90px;
		height:90px;
	}
	
	#vid{
		width: 86px;
		height:86px;
	}
	
	.hex-wrap{
		display: inline-block;
	}
	
	.hex{
		
		-webkit-filter: drop-shadow( 0px 0px 5px #FFFFFF );
		filter: drop-shadow( 0px 0px 5px #FFFFFF );
	}
	
	#contact-form{
		  left: 0;
		  margin-right: 0;
		  width: 100%;
		  margin-left: 0;
		  padding-left: 3%;
		  padding-right: 3%;
    }

}
@media only screen and (max-width: 600px) {

}
/* 500 width ****************************************************** width 500 */
@media only screen and (max-width: 500px) {

	.stars-container{
		width: 1500px;
		height: 1500px;
		top: -200px;
		left: -600px;
	}
	
	.earth{
		width:300px;
		height: 300px;
		bottom: -135px;
		left: -135px;
	}
	
	.sun{
		
	}
	
	#zyrokull{
		right:10px;
		width: 70px;
		height: 70px;
		background-size: 85%;
		background-position: top 10px left 8px;/*right 20px bottom 10px;*/
		border:3px solid #000000;	
		-webkit-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		-moz-box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
		box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
	}
	
	.zyro_msg{
		padding: 15px;
		width: 70%;		
		font-size: 11px;		
		line-height: 1.4;
		border:3px solid #000000;
		-webkit-border-radius: 35px 35px 0px 35px;
		-moz-border-radius: 35px 35px 0px 35px;
		border-radius: 35px 35px 0px 35px;
		
	}
	
	#trw-logo-wrap{
		width: 40px;
		height: 40px;
		top: 100px;
		right: 10px;
	}
	
	#control{	
		
		width: 180px;
		padding: 10px;		

	}

	#control ul{
		margin-top: 170px;
		
	}
	
	
	.introsec{		
		margin: 30px auto 30px auto;		
		width: 95%;
		height: auto;
		text-shadow: 0px 0px 5px rgba(255, 255, 255, 0);		
	}
	
	#home .introsec{
		margin-top: 130px;
	}
	
	.sub-title{
		margin-top:30px;
	}

	.introsec h1{
		font-size:25pt;
	}

	.introsec h3{
		font-size:14pt;
	}

	.introsec p{
		margin-top: 20px;
		
		font-size: 12pt;
	}
	
	#luismips{
		width: 90px;
		height:90px;
	}
	
	#vid{
		width: 86px;
		height:86px;
	}
	
	.hex{
		
		-webkit-filter: drop-shadow( 0px 0px 5px #FFFFFF );
		filter: drop-shadow( 0px 0px 5px #FFFFFF );
	}
	
	#contact-form{
		  left: 0;
		  margin-right: 0;
		  width: 100%;
		  margin-left: 0;
		  padding-left: 3%;
		  padding-right: 3%;
    }




}

	





/************************************************************
* Animations 
*************************************************************/

/* cw rotation
*********************************************************** */
@-webkit-keyframes cw-rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes cw-rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes cw-rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}

/* ccw rotation
*********************************************************** */
@-webkit-keyframes ccw-rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes ccw-rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(-360deg); }
}
@-ms-keyframes ccw-rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(-360deg); }
}

/* div grow: grow1
*********************************************************** */
@keyframes grow1 {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.3);
  }
}



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

.area {
  text-align: center;
  font-size: 20px;
  color: #fff;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur 2s ease-out infinite;
  text-shadow: 0px 0px 5px #ff0, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}