*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Hit and Run!';
    src: url('../fonts/HitandRun-Regular.eot');
    src: local('Hit and Run! Regular'),
         local('HitandRun!-Regular'),
         url('../fonts/HitandRun-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HitandRun-Regular.woff2') format('woff2'),
         url('../fonts/HitandRun-Regular.woff') format('woff'),
         url('../fonts/HitandRun-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Blue';
    src: url(../fonts/Blue\ Winter.ttf);
}

body{
    background: url(../img/Backgrounds/background5.gif);
    background-size: cover;    
}

/*********************************TOY***********************************/

/*CAJA TOY*/
.toy{
    position: fixed;
    right: 10px;
    top:450px;
    z-index: 9999;
}

/*BOCADILLO*/
.toy .bocadillo{
    position: fixed;
    right: 145px;
    top: 355px;
    z-index: 9999;
     animation: comic 15s linear infinite;
}
/*TEXTO DEL BOCADILLO*/
.bocadillo .text{
    width: 160px;
    padding: 12px;
    border-radius: 15px;
    position: absolute;
    top: 30px;
    right: 24px;
    transition: transform 0.3s ease;
}

.text p{
    font-size: 15px;
    text-align: center;
}

.text a{
    color: red;
    font-weight: bolder;
}

/*IMG BOCADILLO*/
.bocadillo img{
    height: 200px;
    width: 210px;
}

@keyframes comic {
    0%{
        opacity: 0;
        transform: translateX(20px);
    }

    66%{
        opacity: 0;
        transform: translateX(20px);
    }

    67%{
        opacity: 1;
        transform: translateX(0);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/********************CONTENEDOR LOGO Y EMOTICONOS***********************/


.container1{
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

/*CAJA LOGOS*/

.encabezado {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-image: url('../sobrenosotros/img/estrellascielo.jpg');
    background-size: cover;
    max-width: 85%;
    height: 190px;
    margin: 20px auto;
    border: solid 4px black;
    margin-top: 50px;
    background-color: aliceblue;
    animation: cielo 20s linear infinite;
}

@keyframes cielo {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 0;
    }
}


/*GIF LOGO*/

.encabezado>.logo{
    width: 250px;
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/*iconos*/

.iconos img{
    position: absolute;
    width: 140px;
    animation: zoom 5s ease-in-out infinite;
}

/*posicion iconos*/

.bonny{
    top: -20px;
    left: 280px;
}

.freddy{
    top: 60px;
    left: 430px;
}

.chica{
    top: -40px;
    right: 270px;
}

.foxy{
    top: 60px;
    right: 130px;
}

.cake{
    top: -20px;
    left: 870px;
}

/*animacion*/

@keyframes zoom {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.9);
    }
}

/***********************PROMO PIZZA*************************/

.promo{
    display: flex;
    background:url(../img/Promos/promo.jpg);
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
    justify-content: space-between;
    padding: 20px;
    background-color: aliceblue;
    max-width: 85%;
    height: 400px;
    border: solid 4px black;
    margin: 20px auto;
    
}

/*****************CONTENDERO MENU Y PIZZAS*******************/

.container2{
    display: flex;
    width: 100%;
    max-width: 1070px;
    margin: auto;
}


/*********************** BARRA LATERAL **********************/

.lateral{
    width: 30%;
}

/*MENU*/

.nav{
    background: #ffde59;
    max-width: 100%;
    height: 550px;
    margin: 20px;
    border: 4px solid black;
    text-align: center;
    font-family: 'Blue';
    font-size: 13px;
}

/*LOGO*/

.nav .logo{
    margin: 20px auto;
    width: 80%;
    height: 200px;
}

.logo img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/*LINKS*/

.nav .links{
    margin: 20px auto;
    width: 90%;
    padding: 10px 0;
}

/* BOTONES */

.nav .links a{
    display: block;
    width: 80%;
    margin: 25px auto;
    padding: 15px 0;
    background-color: white;
    border: 3px solid black;
    border-radius: 8px;
    color: black;
    letter-spacing: 2px;
    box-shadow: 4px 4px 0px black;
    transition: 0.15s;
}

/*POST*/

.post_it{
    /* background: #ffde59; */
    max-width: 90%;
    height: 280px;
    margin: 20px ;
    /* border: solid 4px black; */
}

.post_it img{
    width: 100%;
    height: 100%;
}

/*BANNERS*/

.banners{
    background: #fffffe;
    max-width: 90%;
    height: 350px;
    margin: 20px ;
    border: solid 4px black;
}

/*********************PIZZAS************************/
.lateral2{
    display:block;
    width: 70%;
}

.carta{
    background: #5170ff;
    height: 550px;
    margin: 20px;
    border: solid 4px black;
    padding: 40px 10px 10px 10px; 
    position: relative;
}

.card{
    cursor: pointer;
}

/*LEGEND ESPECIAL PROMOS */

.legend{
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    width: 300px;
    background-color: white;
    border: 4px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

/*TEXTO LEGEND*/

.legend h1{
    text-align: center;
    font-size: 29px;
    color: rgb(247, 0, 0);
    font-family: 'Hit and Run!', cursive;
    padding-top: 5px;
}

.new{
    position: absolute;
    top: 20px;
    left: 80%;
    transform: translateY(-50%);
}

/* GRID DE LAS FOTOS */
.especial{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* TARJETA DE LAS FOTOS */
.card{
    overflow: hidden;
    border: 4px solid black;
    box-shadow: 4px 6px rgba(0, 0, 0, 0.45);
    background: white;
    user-select:unset;
}

/* FOTOS */
.card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

/*********************VIDEO************************/

.theme{
    background: #db0b61;
    height: 630px;
    margin: 40px 20px 20px 20px;
    border: solid 4px black;
    padding: 40px 10px 10px 10px; 
    position: relative;
}

.xpPlayer{
    width: 95%;
    height: 93%;
    margin: 10px auto;
    border: solid 4px black;
    background: url(../img/Decoration/xpvideo.png);
    background-repeat: repeat;
    background-size: cover;
    position: relative;
    box-shadow: 4px 6px rgba(0, 0, 0, 0.45);
}

.xpPlayer .video{
    background-color: red;
    height: 75%;
    width: 95%;
    position: absolute;
    top: 100px;
    right: 20px;
}

.video iframe{
    height: 100%;
    width: 100%;
}


.container3{
    display: flex;
    width: 100%;
    max-width: 1070px;
    margin: auto;
}

.container3 .banners2{
    width: 50%;
}

.banners2 img {
    padding: 40px 10px 10px 10px; 
    width: 100%;
}

/******************** FOOTER ******************/
footer{
    margin-top: 50px;
    background-color: black;
    height: 70px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/*TEXTO FOOTER*/

footer p{
    font-size: 13px;
    color: white;
    text-align: center;
    padding-top: 15px;
    text-decoration:underline;
}

/*SPAN AMARILLO*/

footer span {
    color: #ffde59;
}

/*SPAN ROJO*/

footer .fnaf{
    color: red;
}


/* ================== TABLET ================== */
@media (max-width:1024px){

.container1,
.container2,
.container3{
    max-width: 95%;
}

/* iconos del header un poco más pequeños */
.iconos img{
    width:110px;
}

/* promo más baja */
.promo{
    height:320px;
}

/* pizzas un poco más compactas */
.carta{
    height:auto;
}

.theme{
    height:auto;
}

.xpPlayer{
    height:420px;
}

/* banners laterales más fluidos */
.banners{
    height:auto;
}

}


/* ================== MOVIL ================== */
@media (max-width:700px){

/* header más compacto */
.encabezado{
    height:auto;
    padding:15px;
}

.encabezado>.logo{
    width:180px;
}

/* ocultamos solo algunos iconos para que no se monten */
.cake,
.foxy{
    display:none;
}

.iconos img{
    width:80px;
}

/* promo más pequeña */
.promo{
    height:220px;
}

/* sidebar un poco más estrecha */
.lateral{
    width:35%;
}

.lateral2{
    width:65%;
}

/* grid pizzas pasa a 1 columna */
.especial{
    grid-template-columns:1fr;
}

/* video más adaptable */
.xpPlayer{
    height:300px;
}

.xpPlayer .video{
    top:80px;
}

/* toy un poco más abajo */
.toy{
    top:auto;
    bottom:20px;
}

footer p{
    font-size:11px;
}

}

/* ===== BANNERS RESPONSIVE ===== */

@media (max-width:1024px){
    .banners{
        height:500px;
    }
}

@media (max-width:768px){
    .banners{
        height:650px;
    }
}

@media (max-width:600px){
    .banners{
        height:auto;
    }

    .banners img{
        width:100%;
        height:auto;
    }
}