@charset "utf-8";
/* CSS Document */
@media (max-width: 480px) {
h1{
	font-family:'Roboto','Calibri','Sans serif';
	font-weight:700;
	font-size:2em;
	margin-bottom:0px;
}
h2{
	font-family:'Righteous','Calibri','Sans serif';
	font-weight:400;
	font-size:1.5em;
	margin-bottom:0px;
	color:#ffb031;
}
.mundo{
	width: 80%;
    height: auto;
    left: 5%;
    position: absolute;
    top: 20%;
    z-index: -5000;

-webkit-animation: girar 10s 16 ease;
-moz-animation: girar 10s 16 ease;
-o-animation: girar 10s 16 ease;
}
.countdown .item {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    font-family: 'Open Sans', cursive;
    font-weight: 700;
    font-size: 80px;
    line-height: 180px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    margin: 50px 10px 50px 0;
    padding: 0 10px;
    background: #2A2A2A;
    background: -webkit-linear-gradient(#2A2A2A, #000);
    background: linear-gradient(#2A2A2A, #000);
    overflow: hidden;
}

@-webkit-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-moz-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-o-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
}
@media screen and (min-width: 481px) and (max-width: 767px){
h1{
	font-family:'Roboto','Calibri','Sans serif';
	font-weight:700;
	font-size:4em;
	margin-bottom:0px;
}
h2{
	font-family:'Righteous','Calibri','Sans serif';
	font-weight:400;
	font-size:2em;
	margin-bottom:0px;
	color:#ffb031;
}
.mundo{
	width: 80%;
    height: auto;
    left: 35%;
    position: absolute;
    bottom: -50%;
    z-index: -5000;

-webkit-animation: girar 10s 16 ease;
-moz-animation: girar 10s 16 ease;
-o-animation: girar 10s 16 ease;
}
@-webkit-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-moz-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-o-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}	
}
@media screen and (min-width: 768px){
h1{
	font-family:'Roboto','Calibri','Sans serif';
	font-weight:700;
	font-size:4em;
	margin-bottom:0px;
}
h2{
	font-family:'Righteous','Calibri','Sans serif';
	font-weight:400;
	font-size:2em;
	margin-bottom:0px;
	color:#ffb031;
}
.mundo{
	width: 80%;
    height: auto;
    left: 35%;
    position: absolute;
    bottom: -50%;
    z-index: -5000;

-webkit-animation: girar 10s 16 ease;
-moz-animation: girar 10s 16 ease;
-o-animation: girar 10s 16 ease;
}
@-webkit-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-moz-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
@-o-keyframes girar {
from { -webkit-transform: rotate(0deg) translate(10px); }
to { -webkit-transform: rotate(360deg) translate(0px); }
}
}