@charset "utf-8";



@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');



/* CSS Document */

@keyframes mover {

                0% {

                transform: translate(-200%,0);

                }

           

           100% {

                transform: translate(102%,0);

                }

            }

@keyframes mover2 {

                0% {

                transform: translate(130%,0);

                }

           

           100% {

                transform: translate(-220%,0);

                }

            }

/*@keyframes anochecer {

                0% {

                 background:  linear-gradient(rgb(147,206,222), rgb(117,189,209) , rgb(73,165,191));

                }

				30% {

                 background:  linear-gradient(rgb(241,231,103), rgb(254,182,69), rgb(254,182,69));

                }

           

           60% {

                  background:  linear-gradient(rgb(147,206,222), rgb(117,189,209) , rgb(73,165,191));

                }

	 		100% {

                  background:  linear-gradient(rgb(147,206,222), rgb(117,189,209) , rgb(73,165,191));

                }

            }*/

/*@keyframes sol {

    0%{

        transform: rotate(180deg)

            translate(-800px)

            rotate(-180deg)

            scale(1)

        ;

        background-position: 0 20%;

    }

   

    100%{

        transform: rotate(0deg)

            translate(-800px)

            rotate(0deg)

            scale(1.2)

        ;

        background-position: 0 100%; 

    }

}*/

@keyframes anochecer2 {

    0% {

        background-position: 0 -600px;

    }

    50% {

        background-position: 0 0;

    }

    100% {

        background-position: 0 -600px;

    }

}



body,html{

	padding:0;

	margin:0;

	width: 100%;

	height: 100%;

	overflow: hidden;
}

.all-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

#noche{

	width: 100%;

	height: 100%;

	background:  linear-gradient(rgba(4,37,69,1), rgba(1,13,26,1));

	

	background-size: cover;

   position: absolute;

    overflow: hidden;

    z-index: 1;

	

}

#tarde{

	width: 100%;

	height: 100%;

	background:  linear-gradient(rgb(241,231,103), rgb(254,182,69), rgb(254,182,69));

	background-size:cover;

   position: absolute;

    overflow: hidden;

    z-index: 2;

}

#dia{

	width: 100%;

	height: 100%;

	background:  linear-gradient(rgb(147,206,222), rgb(117,189,209) , rgb(73,165,191));

	background-size:cover;

   position: absolute;

    overflow: hidden;

    z-index: 3;

}



#nube {

	width: 50%;

	position: absolute;

    top: 20%;

    left: 50%;

  animation: mover linear 40s infinite ;

	z-index: 6;

	

}

#nube2 {

	width: 40%;

	position: absolute;

    top: 10%;

    left: 50%;

  animation: mover2 linear 40s infinite ;

	z-index: 4;

	

}

#sol{

	width: 18vw;

    height: 18vw;

    border-radius: 100px;

    background: linear-gradient(#EBE612, #E9B519, #E5142C);

    background-size: 300px 300px; /*El doble del alto para poder moverlo*/

    position: absolute;

    top: 80%;

    left: 50%;

    margin-left: -50px;

	z-index: 5;



	/*animation: sol 10s linear;*/

}

#globo {

	width: 20%;

	position: absolute;

    top: 60%;

    left: 25%;

	z-index: 10;

}

#mensaje1 {

	width: 20%;

	position: absolute;

    top: 63%;

    left: 25%;

	z-index: 11;

	 text-align: center;



}

#mensaje1 img{

	width: 40%;

	

}



@-webkit-keyframes pulse {

    0% { -webkit-transform: scale(1); }

    50% { -webkit-transform: scale(1.1); }

    100% { -webkit-transform: scale(1); }

}

@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}

.pulse {

    -webkit-animation-name: pulse;

    animation-name: pulse;

}



ul {

    padding: 0;

    list-style: none;

    margin-bottom: 0;

}

.footer-social-info a {

	color: #fff;

}

.footer-social-info a:hover {

	opacity: 0.6;

}

.footer-social-info ul li {

	color: #fff;

	padding-top: 10px;

}





.footer-social-info li {

	width: 44px;

	height: 44px;

	margin: 0px 15px 0px auto!important;

	text-align: center;

	float: left;

	padding: 10px;

	border: 1px solid #fff;

	border-radius: 50%;

	background: #000;

}



.footer-social-info li i{

	

	font-size: 20px;

}

.col-md-9 p{

	color: #fff;

	text-shadow: 2px 2px #000;

	margin: 15px 0 10px;

}

.copy{

	float: left;

	

	

}



.carousel-inner{

	height: 100%;

}

#slider,#slider2{

	height: 100%;

}

.carousel-control{

	color: #000;

	opacity: 1;

}

.carousel-control.left,.carousel-control.right{

	background: transparent;

}



.footer-social-info a:hover{

	color:#C0C0C0;

}

#resultruleta {

    width: 110px;

    height: 227px;

    margin: auto;

    position: absolute;

    z-index: 15;

    top: 47%;

    left: 12%;

    cursor: url(../images/cursor.png), pointer;

    

	

}

#resultruletalink {

    width: 110px;

    height: 227px;

    margin: auto;

    position: absolute;

    z-index: 16;

    top: 47%;

    left: 12%;

    cursor: url(../images/cursor.png), pointer;

    display: none;

	

}

#puertaprincipal {

    width:100px;

    height: 150px;

    margin: auto;

    position: absolute;

    z-index: 15;

    top: 0;

    left: 0;

	right: 0;	

	bottom: 0;

   cursor: url(../images/cursor.png), pointer;

}

#puertaprincipalpub {

    width: 100px;

    height: 70px;

    margin: auto;

    position: absolute;

    z-index: 16;

    top: 46%;

    left: 45.5%;

   cursor: url(../images/cursor.png), pointer;

    background: url(../images/logoanimal.png) no-repeat;

    background-position: center;

    background-size: cover;

	display: none;

}

#oriente {

    width:200px;

    height: 200px;

    margin: auto;

    position: absolute;

    z-index: 17;

    top: 75%;

    left: 42%;

    cursor: url(../images/cursor.png), pointer;

	

}

#ruleta {

    width:150px;

    height: 150px;

    margin: auto;

    position: absolute;

    z-index: 17;

    top: 78%;

    left: 42%;

    cursor: url(../images/cursor.png), pointer;

	

}

#tachira {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 17;

    top: 70%;

    left: 82%;

    cursor: url(../images/cursor.png), pointer;



}

#margarita {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 16;

    top: 70%;

    left: 0%;

    cursor: url(../images/cursor.png), pointer;  	

}

#caracas {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 14;

    top: 60%;

    left: 28%;

    cursor: url(../images/cursor.png), pointer;

   	

}

#cojedes {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 14;

    top: 60%;

    left: 38%;

    cursor: url(../images/cursor.png), pointer;

   	

}

#zulia {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 14;

    top: 60%;

    left: 48%;

    cursor: url(../images/cursor.png), pointer;

   	

}

#aragua {

    width: 150px;

    height: 110px;

    margin: auto;

    position: absolute;

    z-index: 14;

    top: 60%;

    left: 58%;

    cursor: url(../images/cursor.png), pointer;

   	

}

#fondo {

    align-self: center;

    width: 100vw;

    aspect-ratio: 1920/1350;

    margin: auto;

    position: absolute;

    z-index: 9;


    background: url(../images/spritefondo.png) repeat-x;

    background-size: cover;

   

}	

#rey2 {

  /* Tamaño de la viñeta individual */

  width:12vw;

  height:auto;

  position: absolute;

  /* Cargamos el sprite (el repeat-x se puede omitir, por defecto se repite) */

  /* background:url(../images/sprite_rey2.png) repeat-x; */

  /* Aplicamos la animación "walk": 0.8seg, 6 viñetas y repetimos infinitamente ESTA EN DESUSO */

  /* animation:walk 2.9s steps(12) infinite; */

  /* Posicionamos el personaje sobre el camino de madera */

  

 	z-index: 17;

	top: 55%;

	left: 19%;

	cursor: url(../images/cursor.png), pointer;

}

#esposa2 {

  /* Tamaño de la viñeta individual */

  width:12vw;

  height:auto;

    position: absolute;

  /* Cómo hay establecido un tamaño, centramos con margin:auto */

  /* Posicionamos el personaje sobre el camino de madera */

  

 	z-index: 17;

	top: 50%;

	left: 72%;

	cursor: url(../images/cursor.png), pointer;

}



#cerrarpronos,#cerrarchismes{

	position: absolute;

	z-index: 16;

	top: 5%;

	left: 10%;

	text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff;

	color: #000;

	font-size: 30px;

	cursor: pointer;

	

}



.modal-lg{

	

	height: 88%;

	

}

.btn-success {

    background: #634a06;

    border: #634a06;

	padding: 15px 52px;

    font-size: 19px;

}

.btn-success:hover, .btn-success:focus,.btn-success:active {

    background: #735810;

    border: #735810;

}



#cartel1{

	width: 182px;

	height: 50px;

    float: right;

   

    margin-right: 21%;

   

   cursor: url(../images/cursor.png), pointer;

    background: url(../images/facilito.png) no-repeat;

    background-position: center;

    background-size: cover;

}

#cartel2{

	width: 182px;

	height: 50px;

   

    

    margin-left: 20%;

   

   cursor: url(../images/cursor.png), pointer;

    background: url(../images/facilito.png) no-repeat;

    background-position: center;

    background-size: cover;

}

.modal-header,.modal-footer{

	border: none;

}

.modal-body{

	width: 70%;

	margin: auto;

	

	color: #ffffff;

/* 	text-shadow: 1px -1px #a99404;
 */
	font-family: 'Berkshire Swash';

}

#munecos{

		background:transparent;

		

		width: 100%;

	    height: 0;

		position:absolute;

		z-index: 49;

		margin-top: 36%;

	}

#carteles{

		background:transparent;

		height: 0px;

		width: 100%;

	

		position:absolute;

		z-index: 50; 

		margin-top: 190px;

}

#contador{

	color: white;

}

p.pglobo{

	word-wrap: break-word;

	text-align:center;

	margin: auto;

	vertical-align: middle;

	position: absolute;

	width: 70%;

	font-weight:bolder;

	margin-top: 40px;

	color:#000;

	font-size:17px;

}

p.pglobo2{

	word-wrap: break-word;

	text-align:center;

	margin: auto;

	vertical-align: middle;

	position: absolute;

	width: 70%;

	font-weight:bolder;

	margin-top: 10px;

	color:#000;

	font-size:17px;

}

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

	#carteles{

		margin-top: 150px;

	}

	p.pglobo,p.pglobo2{

	font-size:15px;

	}

}

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


h2{

font-size:16px;

}

h3{

font-size:14px;

}

p.pglobo,p.pglobo2{

	font-size:13px;

	}

}

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

	#carteles{

		margin-top: 100px;

	}

}

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

	

h2{

font-size:12px;

}

h3{

font-size:10px;

}

p.pglobo,p.pglobo2{

	font-size:11px;

	}

}

/* Por debajo de 400px */

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

	

h2{

font-size:12px;

}

h3{

font-size:10px;

}

p.pglobo,p.pglobo2{

	font-size:11px;

	}

}

.modal-content{

	box-shadow: 0 0px 0px rgba(0,0,0,0);

	border: none;

}



/* Animación de personaje caminando: Simplemente mueve el sprite sheet hacia la izquierda, realizando el movimiento. */

@keyframes walk {

  /* Partimos de la primera viñeta del sprite sheet */

  0% { background-position:0 }

  /* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */

  100% { background-position:-2040px }

}

.btn-o{

	padding:5px!important;

}

.btn-success:active:hover{

	background: #735810;

    border: #735810;

}