*{   
    /*outline: dotted 1px rgb(0, 255, 0);*/
    margin: 0px;
    padding: 0px;
    font-family: "playfair display";
}
/*inicio header + descuento*/

/*p:first-letter{
    font-size: 21px;
}/*si activo este first-letter, cuando recargo la página me desplaza el parrafo hacia la izquierda, alterando la posicion que yo quiero darle. En su lugar he puesto un span personalizado segun letra a modificar*/



.contenedor{
    height: 400px;
    width: 100%;
    background-color: white;
}

#logo{
   
    position:absolute;
    top: 7%;
    left: 41%;
    width: 300px;
    height: 200px; 
    
}

.logo{
   
    width: 300px;
    height: 200px;
    transition: 1s;
    
}

.logo:hover{
    rotate: -10deg;
    opacity: .5;
    width: 320px;
    height:220px
}
   
.michelin{
    margin-top: 274px;
    margin-left: 3%;
    height: 150px;
    width: 200px;
    z-index: 2;  
}

.covidfree{ 
    position: absolute;
    top:260px;
    right:60px;
    height: 130px;
    width:130px;      
}  /*Le he dado unas leves modificaciones para indicar que hay interacción a la página de las medidas preventivas contra covid de Valencia*/

.covidfree:hover{
    height: 150px;
    width: 150px;
    transform:translateY(-20px);
} 

#descuento{
    background:linear-gradient(to bottom,#fb7037,#fa7238,#f9844e,#fa9e6f,#fba87c,#fbc69f, #fbcba7,#fbc69f,#fba87c,#fa9e6f,#f9844e,#fa7238,#fb7037 );
    position: fixed;
    right:-275px;
    top:50px;
    height: 150px;
    width:300px;
    border-radius: 10px / 45px;
    transition: .3s;
    z-index: 5;
}

#descuento:hover{
    opacity: .7;
    position: fixed;
    right:-260px;
    height: 150px;
    border-radius: 18px / 50px;
    
}

#descuento:active{
    background-image: url(../img/header/cuponDescuento.jpg);
    background-size: 280px;
    background-position:center;
    height: 160px;
    position:fixed;
    right: -35px;
    opacity: 1;
    border-bottom-left-radius: 60px;
    border-top-left-radius:10px;
    /*border: 3px outset rgba(238, 119, 8, 0.904);*/
    box-shadow:   1px 1px 20px #d6eafe;
}

/*fin header + descuento*/

/*inicio nav + telefono + redes sociales*/

nav{
    box-shadow: 4px 4px 12px  #522012;
    background:linear-gradient(to right,#8f604e,#90604f,#926552,#996c59,#a37c68,#b3937d,#bfa38d,#cdb59d,#cdb59d,#e8d8be,#f8eed2,#fef7db,#f8eed2,#e8d8be,#cdb59d,#cdb59d,#bfa38d,#b3937d,#a37c68,#996c59,#926552,#90604f,#8f604e);
    transition: 1s;
}

nav:hover{
    box-shadow:1px 1px 6px 2px #fef7db ;
}
nav>ul{
    text-align: center;
}
nav>ul>li{
    display: inline-block;
    margin: 20px;   
}
nav>ul>li>a{
    text-decoration: none;
    /*padding-left: 2em;
    padding-right: 2%;*/
    color:#60433a;
    transition: .3s;
    
}

nav>ul>li>a:hover{
    font-size: 20px;
    text-decoration: underline;
    color:#522012;
    text-shadow: 2px 2px 2px 2px #cdb59d;
}

li::first-letter{
    font-size: 20px;
    font-weight: 600;    
}
.contenedor2{
    overflow: hidden;
    height: 10%;
}
.telefonos{
    box-sizing: border-box;
    text-align: right;
    float: right;
    width: 70%;
    font-weight: 600;
    margin-top: 20px;
    margin-right: 20px;
    font-size: .9rem;
    color: #f06938a8;
}

.iconos{
    box-sizing: border-box;
    float: left;
    width: 21%;
    margin-top: 25px;
    margin-left: 2%;
}

.fa-twitter{
    color: #00abed;
    font-size: 20px;
    margin-left: 3%;
}

.fa-facebook-f{
    color: #3b5998;
    font-size: 20px;
    margin-left: 3%;
}

.fa-pinterest{
    color:#c92228;
    font-size: 20px;
    margin-left: 3%;
}

.fa-instagram{
   color: #9161d0; 
   font-size: 20px;
   font-weight: bolder;
   margin-left: 3%;
}

.fa-google-plus-g{
    color:#d44837;
    font-size: 20px;
    margin-left: 3%;
}

.fa-brands:hover{
    opacity: .6;
}

.letra{
    font-size: 1.5em;
}

/*fin nav + telefono + redes sociales*/

/*main*/
h1:first-letter{
    font-size: 1.5em;
}

h2::first-letter{
    font-size: 30px;
}

h1{
    text-transform: uppercase;
    clear: left;
    margin-top: 6%;
    padding-bottom: 6%;
    color: #68afdc;
    text-align: center;
    font-size: 1.65rem;
}

.fondo{
    background-image: url(../img/fondos/fr1_nigirisushi.jpg);
    min-height: 300px;
    width: 100% auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border:2px inset black;
    box-shadow: inset 2px 1px 1px 1px rgb(197, 194, 194);
}
.cita{
    
    height: 20%;
    width: 75%;
    margin-top: 80px;
    margin-left: 11%;
    padding-bottom: 5%;
    
}
.citagerente{
    letter-spacing: .01em;
    line-height: 200%;
    font-size: 1.2em;
    font-style: italic;
    padding-left: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-left: 4px solid #4682b4;
}
.firma{
    font-size: 1rem;
   
    color: #706c6e;
    text-align: right;
    padding-top: 1%;
    letter-spacing: 0.09em;
    
}


.separador{
    align-items: center;
    margin-left: 33.5%;
    margin-top: 5%;
    margin-bottom: 2%;
    height: .4rem;
    width: 38%;
    background-color: black;
}
.flex{
    margin: 0%;
    flex-wrap: wrap;
    width: 70% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.bici{
    display: block;
    width: 400px;
}
.bici>img{
    margin: 0%;
    margin-top: 5%;
    margin-left: 10%;
    height: 250px;
    box-shadow: 0px 0px 5px 3px rgb(102, 101, 101);
}

.entregas{
    justify-content: space-between;
    width: 50%;
}
.entregas>h1{
    font-size: 1.3rem;
    margin-left: 15%;
    word-spacing: 150%;
}
.entregas>p{
    font-size: .9rem;
    width: auto;
    margin-right: -15%;
    margin-left: 15%;
    word-spacing: 120%;
}

.cien{
    font-size: 1.4em;
   
}
/*inicio estilos taarjeta sugerencias en index.html*/
.contenedor3{
    margin-bottom: 4%;
    margin-left: 4%;
    margin-right: 4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    
}
.imagen>a>img{
    
    margin-left: -215px;
    width: 620px;
    height: 350px;
}
.imagen>a>img:hover{
    opacity: .5;
}
.imagen{
    padding: 20px;
    align-items: center;
    overflow: hidden;
    border: 2px solid #c5c5c5;
    border-radius: 10px;
}

.tarjeta{
    margin-bottom: 2%;
    padding: 20px;
    text-align: center;
    justify-content: space-around;
    width: 220px;
    height: 450px;
    border: 1px solid rgb(230, 230, 201);
    border-radius: 20px;
    box-shadow: 0px 0px 5px 4px #dbdbdb;
      
}
/*fin estilos tarjeta*/
/*fin estilos main index.html*/

/*inicio estilos equipo.html*/
/*inicio estilos imagenes con grid equipo.html*/

.equipogrid{
    gap: .7rem;
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 16% 15% 20% 23% 22% ;
    grid-template-rows: 50% 50%;
    padding-left: 50px;
    padding-right: 50px;
    
}
.equipogrid>img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px rgb(82, 80, 80);
}

.f1{
    grid-column: 1 / 3;
    filter: sepia();
    
    
}
.f2{
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    filter: blur(3px); 
}
.f3{
   grid-column: 5 / 6;
   filter:grayscale();
}
.f4{
    grid-column: 1 / 3;
    filter:contrast(1.2);
    
}
.f5{
    grid-column: 5 / 6;
    filter: sepia();
}
.f1:hover{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    
    transition: 1.5s;
}
.f2:hover{
    transform: scale(60%) rotate(25deg);
    filter: blur(0px);
    transition: 1s;
    box-shadow: 0px 0px 5px 2px rgb(238, 167, 13);
}
.f3:hover{
    transform: rotateY(180deg);
    transition: 1s;
}
.f4:hover{
    transform: rotateX(520deg);
    transition: 1s;
}
.f5:hover{
    transform: skewX( 10deg);
    translate: -35px;
    transition: 1s;
}
/*fin estilos galeria css grid equipo.html*/
/*inicio estilos de las citas del equipo*/
.citasEquipo{
    width: 100%;
    /*overflow: hidden;*/
}
.caraEquipo{
    margin-top: 3%;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 50%;
    position: relative;
    bottom:50px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    box-shadow: 0px 0px 5px 2px grey;   
}
/*en lugar de poner las sombras a las imagenes con inset, las he puesto normales (envolviendo la imagen) para que dé la sensacion de estar despegada del resto de la página. Me ha parecido que la animación del @keyframe quedaba más sugestiva de este modo*/
.caraEquipo:hover{
   animation: upAndDown .45s infinite ease-in-out; 
   animation-direction: alternate-reverse;
   
}
.caraEquipo>img{
    width: 400px;
    position: relative;
    
}
.cita{
    margin-bottom:-6%;
    display: block;
    width: 80%;
    
}
.cita>p{
    line-height: 150%;
    margin: 4%;
    text-justify: inter-word;
    word-spacing: 150%;
    padding-bottom: 2%;
    
}

.cita>p:nth-child(2){
    column-count: 1;
    font-style: oblique;
    
    
}
.cita>p:nth-child(3){
    
    
    text-align: right;
}
.ce1{
    float: left;
    
}
.ce2{
    clear: both;
    float: right;
    
}
.ce3{
    clear: both;
    float:left;
}
.ce4{
    float: right;
    clear: both;
}
.ce5{
    float: left;
    clear: both;
}
.ce1>img{
    left: -175px;
    top: -10px;
}
.ce2>img{
    right: 230px;
}
.ce3>img{
    width: 450px;
    right:250px;
    
}
.ce4>img{
    width: 300px;
    right: 85px;
}
.ce5>img{
    width: 300px;
    right: 70px;
    top:-12px;

}
.bleft{
    border-left: 5px solid #4682b4;
    padding-left: 3%;
    padding-top: 2%;
    font-size: 1rem;
    
  
}
.bright{
    border-right: 5px solid #4682b4;
    padding-right: 3%;
    padding-top:2%;
    font-size: 1rem;
}
.nombreTrabajador{
    color: #b3a497;
}
.lequipo{
    font-size: 1.5rem;
}


/*fin de las citas del equipo*/
/*inicio de los estilos de la carta*/

#menuCarta{
    margin-top: -3%;
    margin-bottom: 5%;
    padding-bottom: 100px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    z-index: 3;
    overflow:hidden;
    border: 2px solid black;
    line-height: 400%;
}

/*pseudoelemento para dar la opacidad al fondo*/

#menuCarta:before{
    content:'';
    display: block;
    position:absolute;
    left:0;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 2;
    opacity: .1;
    background-image: url(../img/fondos/sushitoRestaurant.jpg);
    background-repeat: no-repeat;
    background-position:  center;
    background-size:cover;
}
.cartaDiario{
    
    display: flex;
    flex-direction: column;
    margin-top: 10rem;
    
}
.cartaFestivos{
    
    display: flex;
    flex-direction: column;
    margin-top: 10rem;
    
}

.line{
    line-height: 400%;
    font-size: 1rem;
}

.menuCarta{
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #4682b4;
}
h3{
    line-height: 200%;
    font-weight: 500;
    letter-spacing: 2px;
    color: #dd2a4b;
    font-size: 1rem;
    text-transform: uppercase;
}
h3::first-letter{
    font-size: 1.5rem;
}
.primeros, .segundos, .postres{
    margin-top: 10%;
}


/*fin de los estilos de la carta*/
/*inicio de los estilos [main] para "localizacion.html*/
.localizacion{
    position: relative;
    margin: 0% auto;
    padding-top: 5%;
    padding-left: 2%;
    padding-right: 1%;
    width: 1200px;
    height: 650px;
    
}
iframe{
    display: block;
    width: 100%;
    height: 100%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 8%;
    border-bottom-right-radius: 8%;
}

.mapa{
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 8%;
    border-bottom-right-radius: 8%;
    width: 500px;
    height: 490px;
    position:relative;
    left:0%;
    box-shadow: 0px 0px 8px 4px rgb(150, 148, 148) ;
    
}
.horario{
   
    position: relative;
    left: 40%;
    top:-590px;
    width: 500px;
    height: 440px;
    margin: 100px;
    border: 1px solid black;
    padding: 50px;
    border-radius: 45px;
   
}

.horario>h2{
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #68afdc;
}
.horario>ul>li>h4{
    text-transform:uppercase;
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 300%;

}
.horario>ul>li>h4::first-letter{
    font-size: 1.4rem;
}
.telReserva{
    text-align: center;
    color: #68afdc;
    line-height: 500%;
    font-weight: 600;
    letter-spacing: 80%;
}
.peticion{
    font-style: italic;
    font-size: .95rem;
    line-height: 150%;
    color: #a59390;
}
.peticion>span{
    font-weight: bold;
}
.fondo2{
    
    background-image: url(../img/fondos/fr2_sushitable.jpg);
    min-height: 320px;
    width: 100% auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border:2px inset black;
    box-shadow: inset 2px 1px 1px 1px rgb(197, 194, 194);
    margin-bottom: 4%;
}



/*fin de los estilos [main] para "localizacion.html*/
/*footer*/

footer{
    width: 100%;
    background-color: #2e2e2e;
    color: ivory;  
}

.sushiito{
    font-size: 20px;
}

#columnas{
    padding: 20px;
    column-count: 3;
    column-width: 150px;
    column-gap: 180px;
    column-rule: 2px solid white;
    text-align: center;
    font-size: 13px;
}

.copyright{
    text-align: center;
    margin-top: 70px;
    padding-bottom: 20px;
}

.copyright>p>a{
    color: #cdb59d;
    text-decoration: none;
    transition:.3s;
}

.copyright>p>a:hover{
    font-size: 19px;
    text-shadow: .3px .1px .1px rgb(236, 207, 42);
}

h2{
    color: #7e6046;
}

h2>span{
    color: #7f2529;
}

p{
    line-height: 200%;
    text-transform: uppercase;
}

p::first-letter{
    font-size: 20px;
    text-transform: uppercase;
}

/*media query solicitada en la actividad*/
@media only screen and (max-width: 800px){
    .logo{translate: -120px;}
    .navegador>ul>li{display:block}
    .navegador>ul{text-align: left;}
    .navegador{
    background: linear-gradient(to right,#fef7db,#f8eed2,#e8d8be,#cdb59d,#cdb59d,#bfa38d,#b3937d,#a37c68,#996c59,#926552,#90604f,#8f604e);
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    } 
    .covidfree{
        right: 40px;
    } 
    .tarjeta{width: 320px;
    transition: .5s;}
    .imagen>a>img{margin-left: -175px;}
    .bleft{
        font-size: .8rem;
    }
    .bright{
        font-size: .8rem;
    }
    .lequipo{
        font-size: 1rem;
    }
    .nombreTrabajador{
        font-size: .65rem;
    }
    #menuCarta{
        width: 100%;
        height:100%;
        margin-top: -3%;
        margin-bottom: 5%;
        /*padding-bottom: 100px;*/
        text-align: center;
        display: flexbox;
        flex-wrap: wrap;
        justify-content: space-around;
        position: relative;
        z-index: 3;
        border: 2px solid black;
        line-height: 20%;
    }
    #menuCarta:before{
        content:'';
        display: block;
        position:absolute;
        left:0;
        top: 0;
        width:100%;
        height: 100%;
        z-index: 2;
        opacity: .1;
        background-image: url(../img/fondos/sushitoRestaurant.jpg);
        background-repeat: no-repeat;
        background-position:center;
        background-size:cover;}
    .cartaDiario{
        margin-top: 15%;
        padding-left: 50px;
        padding-right: 50px;
    }
    .cartaFestivos{
        margin-top:15%;
        padding-left: 50px;
        padding-right: 50px;
    }
    .line{
        line-height: 210%;
        font-size: .95rem;
    }

    
}
/*media query que he hecho para centrar las imagenes en las citas segun se encoja el ancho de la ventana*/
@media only screen and (max-width: 700px){
    .caraEquipo{
        top:10px;
    }
    .caraEquipo:hover{
        animation: upAndDown3 .45s infinite ease-in-out;
        animation-direction: alternate-reverse;
    }
}

@media only screen and (max-width: 500px){
    .covidfree{
        right: 20px;
    }
   .caraEquipo{
        top:60px;
    }
    .caraEquipo:hover{
        animation: upAndDown2 .45s infinite ease-in-out;
        animation-direction: alternate-reverse;
    }
}
@keyframes upAndDown{
    0%{bottom:42px;}
    50%{bottom:58px;}
    100% {bottom: 50px;}
}
@keyframes upAndDown2{
    0%{top:52px;}
    50%{top:68px;}
    100% {top: 60px;}
}
@keyframes upAndDown3{
    0%{top:2px;}
    50%{top:18px;}
    100% {top: 10px;}
}