@charset "utf-8";

	

	/* --- TOP MENU --- */
	
	#menuToggle { display: block; position:fixed; top: 30px; left: 30px; z-index: 9999999; -webkit-user-select: none; user-select: none; }
	#menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; }
	#menuToggle a:hover { color: tomato; }

	#menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }

	#menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: /*#cdcdcd;*/#ffffff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
	#menuToggle span:first-child { transform-origin: 0% 0%; }
	#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
	#menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #ffffff; /*#232323;*/ }
	#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
	#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }

	#menu { width: 250px; height: 100%; margin: -100px 0 0 -50px; padding: 120px 20px 10px 55px; background: rgba(0,0,0,0.7); list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); border-radius: 0 0 20px 0; }

	#menu li { margin: 0px; padding: 0px 0px 10px 0px; font-size: 20px; letter-spacing: 0.12em; color:#ffffff;  cursor: pointer; }
	#menu li:hover { color: #68a3c8; }
	#menuToggle input:checked ~ ul { transform: none; }

		.movil_menu { position:relative; top:20px; right:20px; margin: 0px; width: 30px; height: 30px; cursor: pointer; }
		#m_movil { display: block; position: absolute; }
		#m_movil_on { display: none; position: absolute; }

		#grid_container_menu { display: none; position: absolute; top:50%; left:50%; margin: -260px 0px 0px -260px; width: 520px; max-width: 520px; height: 520px; max-height: 520px; z-index: 999; }

		.grid_container_menu { display: grid; grid-template-columns: auto auto auto; margin: 0px auto 0px auto; padding: 0px; width: 100%; max-width: 520px; height: 100%; max-height: 520px; grid-gap: 20px; }
		.grid_container_menu > div { padding: 0px; width: 100%; min-width: 160px; height: 160px; min-height: 160px; background-color: rgba(1,2,14,0.6); text-align: center; border: 2px solid #ffffff; cursor: pointer;  }
		.grid_container_menu > div._m_on { background-color: rgba(180,106,255,0.3); }
		
		.grid_container_menu > div._tl { border-radius: 10px 0 0 0; }
		.grid_container_menu > div._tr { border-radius: 0 10px 0 0; }
		.grid_container_menu > div._bl { border-radius: 0 0 0 10px; }
		.grid_container_menu > div._br { border-radius: 0 0 10px 0; }

		.grid_container_menu > div > a { text-decoration: none; color: #ffffff; }
		.grid_container_menu > div figure { position: relative; overflow: hidden; margin: 0px; width:100%; height: 100%; text-align: center; }
		.grid_container_menu > div figure img { position: relative; margin-top:45px; padding:0px; width:70px; height:70px; transition: 0.6s ease; z-index:98; }
		.grid_container_menu > div figure figcaption {  display: none; position:relative; overflow: hidden; margin: 0px; width:100%; height: 100%; text-align: center; }
		.grid_container_menu > div figure figcaption p { position: relative; top: 45px; padding: 0px; font-size: 18px; font-weight: 200; color:#ffffff; line-height: 34px; }
		.grid_container_menu > div figure figcaption p span { padding: 5px 10px; text-align: center; font-size: 16px; font-weight: 400; line-height: 1.2em; background-color:rgba(180,106,255,0.5); }

		.grid_container_menu > div:hover { background-color: rgba(180,106,255,0.3); }
		.grid_container_menu > div:hover figure img { display:none; }
		.grid_container_menu > div:hover figure figcaption { display: block;}





	
	/* --- CONTACTO --- */
	/*.errorMsg { display: none; position: fixed;
		top: 50%; left: 50%; transform: translate(-50%, -50%); width: 390px; max-width: 90%; height:auto; min-height:80px; padding: 30px 10px 10px 10px;
		font-family:'Raleway'; font-size:16px; font-weight:400; line-height: 30px; text-align: center; color: #ffffff;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
		background: url(../skin/ico_close_win.png) no-repeat 415px 5px rgba(51,51,51, 0.95);		
		border: 1px solid #ffffff; border-radius: 10px; cursor: pointer; z-index: 9999999; 
	}
	*/
	._cont_msj { position: relative; margin: 0px auto 10px auto; padding:0px; width: 392px; min-height:30px; }
	.errorMsg { display: none; position: relative; margin: 0px auto 0px auto; padding:2px 10px 2px 10px; width: 392px; min-height:30px; font-size:16px; font-weight:300; text-align: center; color: #ffffff; 
	}
	
	.error_msg { background-color: rgba(255,111,111,0.95); }
	.procss_msg { background-color: rgba(150,179,232,0.95); }
	.ok_msg { background-color: rgba(103,105,247,0.95); }	
	
	

	#f_contacto { display:block; position: relative; top:0; bottom:0; left:0; right:0; margin:0px auto 0px auto; width: 90%; /*background-color: rgba(0,0,0,1);*/ z-index:99999; }

		#contact_site { position: relative; margin:0px 0px 0px 0px; padding: 0px 0px 10px 0px; width:100%; color:#ffffff; text-align:center; }
		
		#contact_site label { margin: 0px 0px 0px 0px; padding:0px; font-size:14px; font-weight:300; color:#ffffff; text-align:left; }
		#contact_site select { margin: 0px auto 20px auto; padding:2px 10px 2px 10px; width:392px; height:30px; font-size:16px; font-weight:300; color:#ffffff; text-align:left; background-color:#222222; border:1px solid #777777; }
		#contact_site input[type=text], #contact_site input[type=email] { margin: 0px auto 10px auto; padding:2px 10px 2px 10px; width:392px; height:30px; font-size:16px; font-weight:300; color:#ffffff; text-align:left; background-color:#222222; border:1px solid #777777; }
		#contact_site textarea { margin: 0px auto 5px auto; padding:2px 10px 2px 10px; width:392px; height:120px; font-size:16px; font-weight:300; color:#ffffff; text-align:left; background-color:#222222; border:1px solid #777777; }
		#contact_site p { margin: 0px auto 10px auto; padding:0px 10px 0px 10px; width: 392px; font-size:10px; font-weight:300; line-height: 12px; color:#ffffff; text-align: center; }
		#contact_site p a { color:#ffffff; }

		#contact_site input[type=button] { margin: 10px auto 0px auto; padding:2px 10px 2px 10px; width:170px; height:35px; font-size:16px; font-weight:300; color:#ffffff; text-align: center; background-color:rgba(64,129,171,1); border:1px solid rgba(38,98,136,1); }
		#contact_site input[type=button]:hover { color:#fdfdfd; text-align:center; background-color: rgba(0,0,0,0.4); border:1px solid #777777; }
		#contact_site .c_recaptcha { margin: 10px auto 10px auto; padding:0px; width:392px; }
		#contact_site .g-recaptcha { -webkit-transform: scale(1.0); -webkit-transform-origin:0 0; transform:scale(1.0); transform-origin:0 0; }





@media only screen and (max-width: 1920px){
}
@media only screen and (max-width: 1680px){
}
@media only screen and (max-width: 1600px){
}
@media only screen and (max-width: 1440px){
}
@media only screen and (max-width: 1400px){
}
@media only screen and (max-width: 1366px){
}
@media only screen and (max-width: 1360px){
}
@media only screen and (max-width: 1336px){ /*iPad Pro/*/
}
@media only screen and (max-width: 1280px){
}
@media only screen and (max-width: 1152px){
}
@media only screen and (max-width: 1112px){
}
@media only screen and (max-width: 1024px){
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 960px){
}
@media only screen and (max-width: 940px){
}
@media only screen and (max-width: 896px){ /* iPhone XS */
}
@media only screen and (max-width: 834px){
}
@media only screen and (max-width: 820px){
}
@media only screen and (max-width: 812px){ /* iphone X */
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 750px){
}
@media only screen and (max-width: 736px){ /* iPhone 6plus */
}
@media only screen and (max-width: 720px){
}
@media only screen and (max-width: 667px){ /* iPhone 6 */
}
@media only screen and (max-width: 640px){
}
@media only screen and (max-width: 620px){
}
@media handheld, only screen and (max-height: 570px), only screen and (max-device-height: 570px) and (orientation:landscape){
	/*menu pequeño*/
	#grid_container_menu { top: 0; margin: 90px 0px 0px -180px; width: 360px; max-width: 360px; height: 360px; max-height: 360px; z-index: 999; }
	.grid_container_menu > div { padding: 0px; width: 100%; min-width: 106px; height: 106px; min-height: 106px; }
	.grid_container_menu > div figure img { margin-top:18px; }
	.grid_container_menu > div figure figcaption p { top: 28px; font-size: 12px; line-height: 26px; }
	.grid_container_menu > div figure figcaption p span { padding: 5px 10px; text-align: center; font-size: 12px; font-weight: 400; line-height: 1.2em; background-color:rgba(180,106,255,0.5); }
}

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

@media handheld, only screen and (max-height: 414px), only screen and (max-device-height: 414px) and (orientation:landscape){
	/*menu pequeño*/
	#grid_container_menu { top: 0; margin: 90px 0px 0px -140px; width: 280px; max-width: 280px; height: 280px; max-height: 280px; z-index: 999; }
	.grid_container_menu { max-width: 280px; max-height: 280px; grid-gap: 20px; }
	.grid_container_menu > div { padding: 0px; width: 100%; min-width: 80px; height: 80px; min-height: 80px; }

	.grid_container_menu > div figure img { margin-top:15px; width: 50px; height: auto; }

	.grid_container_menu > div figure figcaption p { top: 20px; font-size: 10px; line-height: 26px; }
	.grid_container_menu > div figure figcaption p span { font-size: 10px;  }
}


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

	#grid_container_menu { top: 0; margin: 90px 0px 0px -140px; width: 280px; max-width: 280px; height: 280px; max-height: 280px; z-index: 999; }
	.grid_container_menu { max-width: 280px; max-height: 280px; grid-gap: 20px; }
	.grid_container_menu > div { padding: 0px; width: 100%; min-width: 80px; height: 80px; min-height: 80px; }

	.grid_container_menu > div figure img { margin-top:15px; width: 50px; height: auto; }

	.grid_container_menu > div figure figcaption p { top: 20px; font-size: 10px; line-height: 26px; }
	.grid_container_menu > div figure figcaption p span { font-size: 10px;  }
}
@media only screen and (max-width: 375px){
}
@media only screen and (max-width: 320px){
}
@media (orientation: landscape)  and (max-width: 800px) {
}
@media (orientation: portrait)  and (max-width: 600px) {
}
