*,*:after,*:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

canvas#canvas {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}

body {
  overflow: hidden;
  background-color:#111;
  color:#fefefe;
}


h1 {
  font-size:31px;
	left:0;right:0;
	margin-left:auto;
	margin-right:auto;
}

.NoScroll{overflow: hidden !important;
  height: 100vh;
  width: 100vw;}
.theMainTitle{
	background-image: url(../img/supertitulo.svg);
	background-repeat: no-repeat;
	opacity: 1;
	background-size:contain;
	
	mix-blend-mode: exclusion;
	width: 700px;
	height: 500px;
	z-index: 2;
	position: absolute;
	pointer-events: none;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
#ScrollMouse{opacity: 0.2;display:block;mix-blend-mode: exclusion;width: 50px;z-index: 2;position: absolute;left: 50%;bottom: 50px;margin-left: -25px;
	display: block;-webkit-transition: opacity 0.3s ease;transition: opacity 0.3s ease;}
#ScrollMouse:hover{opacity: 1;}

.summary{
	padding-top:5rem;
	padding-bottom:5rem;
	font-weight:300;
	font-size: 18px;
    line-height: 27px;
}
.summary strong{color: #fff;}
	.summary p{
		display:block;
		padding-top:1.5rem;
	}
	.summary p:first-child{
		padding-top:0px;
	}

div.stories{
	margin-bottom:5rem !important;
	margin-top:5rem;
	cursor: pointer;
}
.stories > .story{
	height: 300px;
	
	width:14.28%;
	background:#ccc;
	margin-left:0.5%;
	margin-right:0.5%;

	background-size: cover;
}

.story#s01 {background-image: url('../img/01-foto.jpg');}
.story#s01:hover {background-image: url('../img/01-viento.gif');}

.story#s02 {background-image: url('../img/02-foto.jpg');}
.story#s02:hover {background-image: url('../img/02-putin.gif');}

.story#s03 {background-image: url('../img/03-foto.jpg');}
.story#s03:hover {background-image: url('../img/03-sufrimiento.gif');}

.story#s04 {background-image: url('../img/04-foto.jpg');}
.story#s04:hover {background-image: url('../img/04-borde.gif');}

.story#s05 {background-image: url('../img/05-foto.jpg');}
.story#s05:hover {background-image: url('../img/05-china.gif');}

.story#s06 {background-image: url('../img/06-foto.jpg');}
.story#s06:hover {background-image: url('../img/06-norte.gif');}

.story#s07 {background-image: url('../img/07-foto.jpg');}
.story#s07:hover {background-image: url('../img/07-america.gif');}

.stories .story{font:900 14px/16px 'Merriweather', serif;position: relative;text-transform: uppercase;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;color: #999;}
.stories .story::before{width: 100%;height:60%;position: absolute;bottom: 0;left:0;z-index: 1;display: block;content: ' ';
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f2000000',GradientType=0 );}
.stories .story::after{position: absolute;bottom: 0;left: 0;width: 100%;padding:5px 10px;z-index: 2;display: block;}
.stories .story:hover{color: #fff;}
.story#s01::after{content: 'Un cambio en el viento';}
.story#s02::after{content: 'El cálculo erróneo de Putin';}
.story#s03::after{content: 'El sufrimiento se vuelve global';}
.story#s04::after{content: 'Barreras en el borde';}
.story#s05::after{content: 'El punto de levantamiento de China';}
.story#s06::after{content: 'La solución del Norte';}
.story#s07::after{content: 'La respuesta de América';}

footer{font-size: 10px;line-height: 13px;padding:30px 0.75rem !important;border-top: 1px solid white;}
footer p{margin-bottom: 10px;}

.BlackCover{display:none;background: rgba(0,0,0,0.8);position: fixed;top:0;left:0;bottom: 0;right: 0;z-index: 10;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.BlackCover img.Cerrar{width: 25px;position: absolute;right: 20px;top:20px;cursor: pointer;opacity: 0.5;}
.BlackCover img.Cerrar:hover{opacity: 0.5;}
.BlackCover .Arrows{position: absolute;top:50%;z-index:10;display: none;height: 30px;width: 100%;}
.BlackCover .Arrows img{display: block;position: absolute;width: 30px;opacity: 0.75;cursor:pointer;-webkit-transition: opacity 0.3s ease;transition: opacity 0.3s ease;}
.BlackCover .Arrows img:hover{opacity: 1;}
.BlackCover .Arrows .Prev{left: 10px;}
.BlackCover .Arrows .Next{right: 10px;}
.BlackCover .StoriesCounter{display: block;font:400 13px/13px 'Merriweather', serif;color:#fff;width: 100%;text-align: center;top:3vh;position: absolute;}


.DisplayStory{display:none;background: white;box-shadow: 0 0 15px #000;border-radius: 2px;padding: 30px;overflow: scroll;position: fixed;top:6vh;bottom:6vh;z-index:11;}
.DisplayStory h2{color: #000;font:900 30px/34px 'Merriweather', serif;letter-spacing: -1px;padding:0;margin-bottom:25px;}
.ImgPrincipal{display: block;margin-bottom: 30px;}
.DisplayStory p{color: #000;font:400 18px/27px 'Merriweather', serif;padding:0;margin-bottom:25px;}

#OnlyMobile{display: none;}

/****** Social Media ******/
.social-media{ display: flex; justify-content: flex-start;}
.social-media ul{ display: flex; justify-content: flex-end; padding-left: 0; margin:20px 0 0;}
.social-media ul li{ padding: 7px 12px; border: 0.5px solid #777; border-right: none; font-size: 12px; color: #ccc; font-weight: 400; transition: all 0.25s;line-height: 22px;}
.social-media ul li:not(:first-child):hover{cursor: pointer;background-color: #444; transition: all 0.25s;}
.social-media ul li:last-child{ border-right: 1px solid #777;}
.social-media ul li a img{ width:20px;display: block;}

@media screen and (max-width:767px){
	/*.hero.is-fullheight {min-height: initial;height: 70vh;position: relative;width:100%;}
	canvas#canvas{height: 70vh;width:100%;}*/
	#ScrollMouse{opacity: 1;mix-blend-mode: color-dodge;width: 50px;z-index: 2;position: absolute;left: 50%;bottom: 50px;margin-left: -25px;}
	.theMainTitle{width: 80%;height: 45%;}
	.stories{display: none;}
	.stories .story::after{font:900 42px/46px 'Merriweather', serif;padding: 5px 20px;bottom: 10px;opacity: 1;color:#fff;}
	.stories > .story{
		margin:auto;
		width:auto;
		margin-bottom:1rem;
	}
	#OnlyMobile{display: block;}
	#OnlyMobile .DisplayStory{display: block;position: initial;top:initial;height: initial;background: transparent;padding: .75rem;box-shadow: none;    border-bottom: 1px dashed #fff;
    						margin-bottom: 20px;}
	#OnlyMobile .DisplayStory h2{color:#fff;}
	#OnlyMobile .DisplayStory p{color:#fff;}
	footer{padding:10px 0.75rem !important;border: none;}

	.social-media ul li.BorderRight{ border-right: none;}
	.summary {padding-top: 1.5rem;}
    .summary p{margin: 10px 0;font-size: 18px;line-height: 27px;}
    .social-media ul li {padding: 9px 10px;}

}