@-webkit-keyframes example {
  	0%   {color: #ff6300;}
    100% {color: white;}
}



.clearfix {
	clear:both;
}

a{
	font-family: 'Krona One', sans-serif;
	color: white;
}


a:hover {
	animation:blink .2s step-start 0s infinite;
	-webkit-animation:blink .2s step-start 0s infinite;
	text-shadow: 0 0 20px #f10b0b, 20px 14px 10px rgba(206,89,55,0);
}
.mainNav {
	font-size: 29px;
	font-family: 'Krona One', sans-serif;
	width:300px;
	position:fixed;
	text-align:center;
	z-index: 95;
	transition:all .4s;
	color: white;
}
.mainNav.top {
	top:20px;
	left:50%;
	margin-top: 40px;
	margin-left:-150px;
}
.mainNav.bottom {
	bottom:20px;
	left:50%;
	margin-left:-150px;
}
.mainNav.left {
	left:-110px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	top:50%;
	margin-top:-20px;
	height:40px;
}
.mainNav.right {
	right:-110px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	top:50%;
	margin-top:-20px;
	height:40px;
	
}

.mainNav.right:hover {
	right:-110px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	top:50%;
	margin-top:-20px;
	height:40px;
	text-shadow: 0 0 20px #f10b0b, 20px 14px 10px rgba(206,89,55,0);
}
a.navItem {
	font-family:'PxGroteskBold';
	
}

h1, h2, h3,h4, li{
	font-family: 'Krona One', sans-serif;
}

h1:hover{
	font-size: 45px;
	}
h1{
	text-transform: uppercase;
	color: white;
	font-size: 40px;
	animation-name: example;
	animation-duration: 4s;
	margin-right: 1900px;
	text-shadow: 0 0 20px #f10b0b, 20px 14px 10px rgba(206,89,55,0);
}

header{
	text-align: center;
	background-color: black;
	width: 100%;
	padding: 10px;
}
h2{
	text-align: center;
	background-color: #ffffff;
	width: 30%;
	padding: 5px;
	font-size: 18px;
	margin-top: 901px;
	color: black;
	
}

h3{
	text-align: center;
	background-color: black;
	width: 30px;
	padding: 30px;
	font-size: 50px;
	text-transform: uppercase;
	color: white;
}


h4{
	text-align:left ;
	background-color: black;
	color: white;
	margin-top: 900px;
	width: 80%;
	padding: 40px;
	font-size: 50px;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 40px;
}
h4:hover{
	font-size: 45px;
	}



blink.tooltip {
  outline: none;
  color: red;
  -webkit-animation: blink .75s linear infinite;
  -moz-animation: blink .75s linear infinite;
  -ms-animation: blink .75s linear infinite;
  -o-animation: blink .75s linear infinite;
  animation: blink .75s linear infinite;
}

@-webkit-keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
@-moz-keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
@keyframes blink { 
   0% {opacity: 1;}
   50%{opacity:1;}
   100%{opacity:0;}
}
blink.tooltip:hover {
  color: black;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
body{
	font-family: 'Inconsolata', monospace;
	background-color: black;
}

img{
	width: 10%;
	height: auto;
}

.post{
	background-color: orangered;

}

.postcontent{
	display: flex;
	max-width: 1200px;
margin: 0px auto;

}

.cajatxt{
	font-size: 30px;
	max-width: 960px;
	padding: 20px;
	margin: 0px auto;
	background-color: orangered;
}



.boton{
	margin: 40px 0;
	display: inline-block;
	background-color: yellow;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	padding: 10px 20px;
}

#loadingScreen {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:120;
	background-color:#000;
	opacity:1;
	transition:all 2.5s;
	pointer-events:none;
}
#loadingScreen.loaded {
	opacity:0;
}
img.loading {
	position:fixed;
	width:300px;
	height:auto;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-220px;
	opacity:1;
}
.boton:hover{
	background-color: blue;
	color: white;
}

.columnas{
display: flex;
max-width: 1200px;
margin: 0px auto;
		}

.columnas p{
	padding: 20px;
	font-size: 40px;
	}
	
	
	.confondo{
		height: 100%;
		display: flex;
		align-items: center;
		background-position: center center;
		background-size: cover;
		padding-left: 120px;
		background-color: black;
	}
	
	.confondo2{
		height: 20%;
		display: flex;
		align-items: center;
		background-position: center center;
		background-size: cover;
		width: 100%;
		padding-left: 120px;
		background-color: black;
	}
	
	
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  right:-110px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	top:50%;
	margin-top:-20px;
	height:40px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
left:-110px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	top:50%;
	margin-top:-20px;
	height:40px;
	color: white;}
.swiper-container-rtl .swiper-button-prev {background-color: yellow;padding: 10px 20px;font-family: 'Anton', sans-serif;font-size: 400px;right: 0px;left: auto;}

	
@media only screen and (max-width: 768px) {
	.columnas, .postcontent {
		display: block !important;
	}
	.mainNav.top{
		margin-top: 90px;
	}
	h2{
	text-align: center;
	background-color: orange;
	width: 50%;
	padding: 5px;
	font-size: 10px;
	
	
	
}
h3{
	text-align: center;
	background-color: blue;
	width: 30%;
	padding: 30px;
	font-size: 20px;	
	text-transform: uppercase;
	margin-top: none;
	margin-bottom: 400px;
}
	}
	
	
	@media only screen and (max-width: 1517px) {
	.columnas, .postcontent {
		display: block !important;
	}

	h2{
	text-align: center;
	background-color: #ffffff;
	width: 30%;
	padding: 5px;
	font-size: 10px;
	margin-top: 500px;
	color: black;
	
	
}
h3{
	text-align: center;
	background-color: black;
	width: 70%;
	padding: 28px;
	font-size: 14px;
	text-transform: uppercase;
}


	}
	.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  right:-110px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	top: 67%;
	margin-top:-20px;
	height:40px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
left:-110px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	top:67%;
	margin-top:-20px;
	height:40px;
	color: white;}