@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Oswald:400,300,700);
/*inicio 68 */
* {
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	/*background: url('../proyectos/01aguasaalsm.JPG') no-repeat center center fixed;*/
/*	background: url('img/fondohelado.jpg') no-repeat center center fixed;
	background: url('img/fondobillar.jpg') no-repeat center center fixed;	*/
		background: url('img/fotobar.jpg') no-repeat center center fixed;
	background-size: cover;
	min-width: 500px;
	min-height: 200px;
	color: #fff;

	height:100vmax;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;

}
.fondodos{
	background: url('img/fondobillar.jpg') no-repeat center center fixed;
	background-size: cover;
}
.fondotr:nth-of-type(odd){
/*mix-blend-mode: multiply;*/
background: rgba(195,195,195,0.6);
text-shadow: 2px 5px 2px rgba(0,0,0,.5);
     -webkit-clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%);
     clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%);
}
.fondotr:nth-of-type(even){
/*mix-blend-mode: multiply;*/
background: rgba(195,195,195,0.6);
   background-size: cover;
    -webkit-clip-path: polygon(0 0%, 90% 0, 100% 100%, 10% 100%);
    clip-path: polygon(0 0%, 90% 0, 100% 100%, 10% 100%);
    margin-top: 13px; // this is dumb, revisit
    background-attachment:fixed;
}


.fondotr h1{
text-shadow: 2px 5px 2px rgba(0,0,0,.5);
}

.seccion:nth-of-type(odd){
    /*  background: url('imagenesmik/ATARDECER6.JPG') 50% 50%;*/
   background: #00baff;
     background-size: cover;
     -webkit-clip-path: polygon(0 40%, 100% 19%, 100% 91%, 0 100%);
     clip-path: polygon(0 40%, 100% 19%, 100% 91%, 0 100%);
        margin-top: -135px; // this is dumb, revisit

}
.seccion:nth-of-type(even) {

    background: #00baff;
/*    background: url('imagenesmik/ATARDECER3.JPG') 50% 50%;*/
    background-size: cover;
    -webkit-clip-path: polygon(0 1%, 100% 0, 100% 100%, 15px 100%);
    clip-path: polygon(0 1%, 100% 0, 100% 100%, 15px 100%);
    margin-top: -135px; // this is dumb, revisit
    background-attachment:fixed;

}

.bars {
	  /* background-color:pink; */
	position: absolute;
	width: 27px;
	height: 27px;
	top: 30px;
	right: 30px;
	cursor: pointer;
	z-index: 101;
	padding-top:9px;
}

.bar {
	width: 100%;
	height: 4px;
	background-color: #fff;
	position: absolute;
}

span::before,
span::after {
	content: "";
	display: block;
	background-color: #fff;
	width: 100%;
	height: 4px;
	position: absolute;
}

.bar::before {
	transform: translateY(-9px);
}

.bar::after {
	transform: translateY(9px);
}

.bars.active .bar {
	background-color: transparent;
}

.bars.active span::before {
	animation: top-bar 1s;
	animation-fill-mode: forwards;
}

.bars.active span::after {
	animation: bottom-bar 1s;
	animation-fill-mode: forwards;
}


/* Navbar Links CSS */

#nav {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all 1s;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
}

#nav a {
	color: #fff;
	text-decoration: none;
	line-height: 70vw;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-indent: 50vw;
	border-radius: 50%;
	transition: all .5s;
}

#nav a:hover {
/*	background: rgba(4, 26, 62, 0.5);*/
	mix-blend-mode: multiply;
}

ul {
	list-style: none;
}

.visible {
	z-index: 100 !important;
	opacity: 1 !important;
}

.shape-circle {
	border-radius: 50%;
	width: 20vw;
	height: 20vw;
	top: -10vw;
	right: -10vw;
	position: absolute;
	transition: all 1s ease-in-out;
	background: #2979FF;
	box-shadow: 0 0px 0px rgba(4, 26, 62, 0.5);
}

nav.visible li:first-child {
	width: 200vw;
	height: 200vw;
	top: -100vw;
	right: -100vw;
	z-index: 5;
	transition: all .5s ease-in-out;
	box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);

}
nav.visible li:nth-child(2) {
	width: 150vw;
	height: 150vw;
	top: -75vw;
	right: -75vw;
	z-index: 6;
	transition: all .6s ease-in-out;
	box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);

}

nav.visible li:nth-child(3){
	width: 100vw;
	height: 100vw;
	top: -50vw;
	right: -50vw;
	z-index: 7;
	transition: all .7s ease-in-out;
	box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);

}

nav.visible li:last-child{
	width: 50vw;
	height: 50vw;
	top: -25vw;
	right: -25vw;
	z-index: 8;
	transition: all .8s ease-in-out;
	box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);
	/*background: url('../proyectos/proyectosgaleria2020.png') no-repeat right top fixed;
	background: url('img/pool-snooker-ball5.svg') no-repeat right top fixed;*/

}

nav.visible li a {
	font-size: 4em;

}
nav.visible li:first-child a {
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.74), 0 2px 4px rgba(0, 0, 0, 0.96);
	line-height: 265vw !important;
	text-indent: 15vw !important;
	/*background: url('../proyectos/wMMMv66.jpg') no-repeat left bottom fixed;*/
	background: url('img/Jarno-8-ball.svg') no-repeat left top fixed;


}

nav.visible li:nth-child(2) a {
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.74), 0 2px 4px rgba(0, 0, 0, 0.96);
	line-height: 200vw !important;
	text-indent:15vw !important;
	/*background: url('../proyectos/proyectosgaleria2020.png') no-repeat center center fixed ;*/

	background: url('img/Jarno-9-ball.svg') no-repeat center top fixed ;

}

nav.visible li:nth-child(3) a {
	/*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.74), 0 2px 4px rgba(0, 0, 0, 0.96);
	line-height: 137vw !important;
	text-indent: 10vw !important;
	/*background: url('../proyectos/miniaturasfotosmiguel.jpg') no-repeat center center fixed ;
	background: url('../proyectos/03lunasm.JPG') no-repeat left top fixed;*/
	background: url('img/Stellaris-Red-snooker-ball.svg') no-repeat right top fixed ;

}

nav.visible li:last-child a {
	/*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.74), 0 2px 4px rgba(0, 0, 0, 0.96);
	line-height: 70vw !important;
	text-indent:4vw !important;
	/*background: url('../imagenes2020/LUnaHOme.JPG') no-repeat right top fixed ;*/
background: url('img/Jarno-w-ball.svg') no-repeat right top fixed ;


}


/* Main Body CSS */
/* Main Body CSS */

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

h1 {
	font-size: 50px;
	text-shadow: 0 20px 30px rgba(255, 255, 255, 0.19), 0 9px 9px rgba(255, 255, 255, 0.23);
	text-transform: uppercase;
	font-size: 120px;
	letter-spacing:5px;
	padding-top:40px;
	color: #FFF;
	font-weight: lighter;
}

article p {
	padding-bottom: 15px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

article a {
	color: #fff;
	text-decoration: none;
	opacity: .2;
	font-size: 12px;
}

article a:hover {
	opacity: .8;
}

#listaNumeros {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font-size: 15px ;
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#listaNumeros ol {
    margin: 0 0 0 2em;
}

#listaNumeros {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 1em;
    padding: 0;

    counter-reset: li-counter;
}

#listaNumeros > li{
    position: relative;
    margin-bottom: 1.5em;
    padding: 1.5em;
/*    background-color: #F2F2F2;*/
    background: rgba(195,195,195,0.6);
    text-align:center;
font-size:1.9em;
}

#listaNumeros > li:before {
    position: absolute;
    top: -0.3em;
    left: -0.5em;
    width: 1.8em;
    height: 1.2em;

    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #F2F2F2;
    background-color: #000;

    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: hidden;

    content: counter(li-counter);
    counter-increment: li-counter;
}


@keyframes top-bar {
	50% {
		transform: translateY(0);
	}
	100% {
		transform: rotate(45deg) translateY(0);
	}
}

@keyframes bottom-bar {
	50% {
		transform: translateY(0);
	}
	100% {
		transform: rotate(-45deg) translateY(0);
	}
}


@media only screen and (max-width: 1300px) {
	.portada a{
		font-family: 'Permanent Marker', cursive;
		/*font-size: 150px;*/
		font-size: 8em;
		color: #000;
	}
}
@media only screen and (max-width: 1000px) {
	.portada a{
		font-family: 'Permanent Marker', cursive;
		/*font-size: 150px;*/
		font-size: 5em;
		color: #000;
	}
	.portada a:hover, h4.title a:hover{
		color: #006;
	}
	nav.visible li a {

		font-size: 2em;
	}
	nav.visible li:first-child a {
		text-shadow: 1px 3px 8px rgba(0, 0, 0, 0.84), 0 2px 4px rgba(0, 0, 0, 0.96);
		line-height: 265vw !important;
		text-indent: 15vw !important;
		/*background: url('../proyectos/wMMMv66.jpg') no-repeat left bottom fixed;
		background: url('img/Jarno-8-ball') no-repeat left top fixed;*/


	}

	nav.visible li:nth-child(2) a {
		text-shadow: 1px 3px 8px rgba(0, 0, 0, 0.84), 0 2px 4px rgba(0, 0, 0, 0.96);
		line-height: 200vw !important;
		text-indent:15vw !important;
		/*background: url('../proyectos/proyectosgaleria2020.png') no-repeat center center fixed ;

		background: url('../imagenes2020/IMG_5987sm.JPG') no-repeat right top fixed ;
		*/
		background: url('img/Jarno-9-ball.svg') no-repeat right top fixed;
	}

	nav.visible li:nth-child(3) a {
		/*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
		text-shadow: 1px 3px 8px rgba(0, 0, 0, 0.84), 0 2px 4px rgba(0, 0, 0, 0.96);
		line-height: 137vw !important;
		text-indent: 10vw !important;
		/*background: url('../proyectos/miniaturasfotosmiguel.jpg') no-repeat center center fixed ;
        background: url('../proyectos/03lunasm.JPG') no-repeat left top fixed;
		background: url('../imagenes2020/ATARDECER4sm.JPG') no-repeat right top fixed ;*/
			background: url('img/Stellaris-Red-snooker-ball.svg') no-repeat right top fixed ;

	}

	nav.visible li:last-child a {
		/*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
		text-shadow: 1px 3px 8px rgba(0, 0, 0, 0.84), 0 2px 4px rgba(0, 0, 0, 0.96);
		line-height: 70vw !important;
		text-indent:4vw !important;
		/*background: url('../imagenes2020/LUnaHOmesm.JPG') no-repeat right top fixed ;
		background: url('../imagenesmik/fondos/ATARDECER3.JPG') no-repeat right top fixed ;*/
			background: url('img/Jarno-w-ball.svg') no-repeat right top fixed ;


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

	h1 {
		padding-top:80px;
		font-size: 60px;
	}
	 li a {


	}
}



/*   fin 68*/
/* signature */
.signatureBox{text-align:right; padding:4px;}
.signatureBox.fixed{ position:fixed; bottom:8px; right:8px; }
.signature, .signature a{color:#484848; }
.signature:before, .signature:after{ display:inline-block; overflow:hidden; vertical-align: bottom; -webkit-transition: all 0.5s; -webkit-transition: all 0.5s; width:11px}
.signature:before{content:'MMM';}
.signature:after{content:'Dev'; margin-left:2px;width:20px; height:20px}
.signature:hover{color:#FFFFFF;}
.signature:hover:before{width:76px;}
.signature:hover:after{width:34px; margin-left:3px;}