@import url("https://fonts.googleapis.com/css?family=Lato:300,700");
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@font-face {
  font-family: 'gamer';
  src: url('/fonts/prstart.ttf'); 
  src: url('/fonts/prstart.ttf')  format('truetype');
}

body {
	background: #000;
	opacity:0;
}

body.show{
  -webkit-animation:fadeIn 5s ease;
  opacity:1;
}
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
header{
	position: -webkit-sticky;
	position: sticky;
	width:100%;
	max-width:1366px;
	font-size: 25pt;
	z-index:1000;
	background-color:#000;
	height: 70px;
	top:0px;
	
}
header a {
	border-bottom: none;
}
body, input, select, textarea {
	color: #fff;
	font-family: "Lato", Helvetica, sans-serif;
	font-size: 15pt;
	font-weight: 300;
	line-height: 1.75em;
}

#main{
	max-width:1366px;
	margin:auto;
}

header h1{
	margin-top:15px;
	font-size: 30pt;
}
article{
	padding:1em;
}
article p{
	text-align:justify;
	font-size:0.5 em;
}

a {
	
	color: #fff;
	text-decoration: none;
	/*border-bottom: dotted 1px;*/
}


a:hover {
	text-decoration: none;
	color: rgb(166, 0, 0);
	border-bottom-color: transparent;
}

div.cover_o a{
	text-shadow: -2px -2px 0 rgb(166, 0, 0), 2px -2px 0 rgb(166, 0, 0), -2px 2px 0 rgb(166, 0, 0), 2px 2px 0 rgb(166, 0, 0)!important; /* Nuevo estilo de contorno */
}

div.cover_o a:hover{
	color: rgb(200, 200, 200)!important;
}

.topnav {
	position: absolute;
    right: 0;
    top: 0;
	z-index:100;
	background-color:#000;
	height: 70px;
}

h1.gamer{
	 font-family: 'gamer';
	 font-size: 2em;
	 background-color:#000;
	 color:#fff;
	 width:60vw;
}

#logo{
	/*min-width:250px;*/
	width:400px;
	
}
.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 720px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 850px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		padding:0px;
		background-color:#000;
	}
	.topnav.responsive a:hover{
		background-color:#888;
	}
  
	.post_it{
		position: absolute;
	}
	
	header h1 {
		font-size: 32pt;
	}
	
	.topnav a {
		font-size: 20pt;
	}

}

.resaltar:hover {
  animation: resaltar 2.2s infinite ease-in-out;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  z-index: 10;
}

/* Animación suave de escala con efecto "latido" */
@keyframes resaltar {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.07);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

#corcho{
	background-color: #494d53;
	background-image: url("../images/banner1.jpg");
	background-repeat: repeat;
	color: #d1d2d4;
	padding: 10px 10px;
	overflow: hidden;
}
.proyectos{
	text-align:left;
	color: #fff;
	font-family: "Lato", Helvetica, sans-serif;
	font-size: 15pt;
	font-weight: 300;
	line-height: 1.75em;
}



#proyectos{
	background-color: #000;
}

#contacto{
	background-attachment: fixed;
	background-color: #494d53;
	background-image: url("../images/banner.jpg");
	background-position: top left,center center;
	background-repeat: repeat,no-repeat;
	background-size: cover;
	color: #d1d2d4;
	padding: 4em 0;
}
#cursos li{
	display: inline-block;
	padding: 0 1.25em 0 0;
}
section {
	position: relative;
	text-align: center;
}

#login{
	padding: 8em 0;
}
#proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    padding: 2em 1em;
    justify-content: center;
	background-color:black;
}

.proyecto {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.cover_o {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

.cover_o a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    font-size: 1.1em;
    line-height: 1.4;
}
.cover:hover { 
	transition: all .75s;
	transform:scale(1.2);
}

.cover:hover {
    opacity:0.5;
}

.texto {
    display: none;
    color: #fff;
    font-weight: bold;
    font-size: 14pt;
    opacity: 1.0;
	padding:5px;
}

div.cover:hover + span.texto{
    display:block;
}
span.texto{
	pointer-events: none;
}



.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {
color: #ffffff;
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
}

.banner .inner {
position: relative;
z-index: 2;
}

.banner .button {
border-color: white !important;
color: #ffffff !important;
}

.banner .button:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

.banner .button:active {
	background-color: rgba(255, 255, 255, 0.2);
}

.banner h2 {
	font-size: 2.25em;
	line-height: 1.25em;
	margin: 0 0 0.5em 0;
	padding: 0;
}

.banner p {
	font-size: 1.2em;
	-webkit-text-stroke: 1px black;
	font-weight:bold;
	text-stroke: 1px black;
}


/* Elementos de formulario */
input, select, textarea {
		color: #646464;
		font-family: "Lato", Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: 300;
		line-height: 1.75em;
		max-width:350px;
		width:80vw;
		resize: none;
		background-color: white;
		border-radius: 0.5em;
		border: solid 1px rgba(144, 144, 144, 0.25) !important;
		cursor: pointer;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 3.5em;
		padding: 0 0.5em;
		margin: 0.5em;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
}
/*Botones*/

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #777;
		border-radius: 0.5em;
		border: solid 1px rgba(144, 144, 144, 0.25) !important;
		color: #545454 !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 700;
		height: 3.5em;
		letter-spacing: 0.1em;
		line-height: 3.5em;
		overflow: hidden;
		padding: 0 1em;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		.button:hover {
			background-color: rgba(244, 244, 244, 0.575);
			color: #f44 !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		.button:active {
			background-color: rgba(144, 144, 144, 0.2);
		}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		.button.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].big,
		input[type="reset"].big,
		input[type="button"].big,
		.button.big {
			font-size: 1em;
			height: 3.5em;
			line-height: 3.5em;
			padding: 0 2.25em;
		}

		input[type="submit"].special,
		input[type="reset"].special,
		input[type="button"].special,
		.button.special {
			background-color: #e0555a;
			color: #ffffff !important;
		}

			input[type="submit"].special:hover,
			input[type="reset"].special:hover,
			input[type="button"].special:hover,
			.button.special:hover {
				background-color: #E46B6F;
			}

			input[type="submit"].special:active,
			input[type="reset"].special:active,
			input[type="button"].special:active,
			.button.special:active {
				background-color: #DC3F45;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		.button.disabled,
		.button:disabled {
			background-color: #646464 !important;
			box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
			color: #fff !important;
			cursor: default;
			opacity: 0.25;
		}

		
/*post_its*/
	.post_it, .post_it2{
		position:absolute;
	}
	#rules{
		top:100px;
		left:50px;
	}
	

	
#draw2 {
  position: absolute;
  /*width: 7vw;*/
  bottom: -50px;
  left: 10px;
  animation:
    caminar 111s infinite linear,
    balanceo 2.6s infinite linear;
  transform-origin: center;
}

/* Movimiento horizontal y flip */
@keyframes caminar {
  0% {
    transform: translateX(0) scaleX(1);
  }
  49% {
    transform: translateX(40vw) scaleX(1);
  }
  50% {
    transform: translateX(40vw) scaleX(-1);
  }
  99% {
    transform: translateX(0vw) scaleX(-1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}

/* Simulación de pasos (balanceo rápido) */
@keyframes balanceo {
  0% {
    rotate: -0.5deg;
  }
  50% {
    rotate: 0.5deg;
  }
  100% {
    rotate: -0.5deg;
  }
}	

	#draw3{
		width:7vw;
		left:10vw;
		top:1vh;
		-ms-transform: rotate(2deg); /* IE 9 */
		-webkit-transform: rotate(2deg); /* Chrome, Safari, Opera */
		transform: rotate(2deg);
	}
	
	
	#draw4{
		/*width:7vw;*/
		right:8vw;
		bottom:1vh;
		-ms-transform: rotate(-4deg); /* IE 9 */
		-webkit-transform: rotate(-4deg); /* Chrome, Safari, Opera */
		transform: rotate(-4deg);
	}
	
		
	
	#draw5{
		width:7vw;
		right:8vw;
		top:4vh;
		-ms-transform: rotate(3deg); /* IE 9 */
		-webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
		transform: rotate(3deg);
	}
	
	#draw6{
		top:120px;
		right:20px;
		-ms-transform: rotate(2deg); /* IE 9 */
		-webkit-transform: rotate(2deg); /* Chrome, Safari, Opera */
		transform: rotate(2deg);
	}
	
	#draw7{
		width:7vw;
		left:34vw;
		top:1vh;
		transform: rotate(-4deg);
	}
	
	#draw8{
		width:7vw;
		left:42vw;
		top:1vh;
		transform: rotate(2deg);
	}
	
	#draw9{
		width:7vw;
		left:2vw;
		top:1vh;
		-ms-transform: rotate(-6deg); /* IE 9 */
		-webkit-transform: rotate(-6deg); /* Chrome, Safari, Opera */
		transform: rotate(-6deg);
	}
	
section h2{
/*	background-image: url("../images/splash2.png");
	background-size: 450px 100px;
	background-position: center center,center center;
	background-repeat: no-repeat;	 
	height:100px;
	padding-top:65px;*/
	font-family: 'Josefin Sans', sans-serif;
}



.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}