@import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font-family: louis_george_cafe, sans-serif, Euphorigenic;
    font-size: 1.2rem;
    min-height: 100dvh;
    background: aliceblue;
}
h2 {
    text-align: center;
    color:  rgba(27,69,166,1);
    background: aliceblue;
    border-radius: 5px;
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
    width: 100%;
}

.grid-container {
    border-radius: 4px;
    padding: 0px;
    text-align: center;
}
.grid-container {
    display: grid;
    grid-template: 
    "header"  100px
    "navbar"  50px
    "main"    1fr
    "sidebar" 100px
    "footer"  100px;
}
/*----------Inicio Top Navbar----------*/
.top-bar {
    z-index: 10;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    background: #2980B9;
    background: -webkit-linear-gradient(to left, #2980B9, #6DD5FA, #FFFFFF, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to left, #2980B9, #6DD5FA, #FFFFFF, #FFFFFF, #6DD5FA, #2980B9);
    width: 100%;
    height: 100px;  
}
.top-bar span{
    color: #fff;
}
.top-bar ul {
    list-style: none;
    display: flex;
    color: #fff;
}
.top-bar li {
    margin: 0px 5px;
}
.top-bar a {
    color: #fff;
    border-radius: 5px;
    transition: all 0.3s;
}
/*.top-bar a .face {
    background-color:#fff;
    color: #0866FF;
    border-radius: 50px;
    font-size: 2rem;
} 
.top-bar .phone {
    background-color: #ed088e;
    color: #fff;
    border: solid 3px #fff;
    padding: 2.5px;
    border-radius: 50px;
    font-size: 1.5rem;
}
.top-bar .mail {
    background-color: #25D366;
    color: #fff;
    border: solid 3px #fff;
    padding: 2.5px;
    border-radius: 50px;
    font-size: 1.5rem;
}
.top-bar a .what {
    background-color: #25D366;
    border-radius: 50px;
}
.top-bar a .inst {
    background-color: #ed088e;
    border-radius: 5px;
}*/
.top-bar a:hover {
    color: antiquewhite;
    background-color: none;
}
.top-bar span {
    color: #2980B9;
}
.logo {
    position: absolute;
    left: 55%;
    margin-left: -150px;
    border-radius: 100px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: #fff;
    top: 5px;
    z-index: 2;
    transition: all 0.5s;
}
.logo:hover {
    transform: scale(1.2);
}
.correo {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: #fff solid 2px;
    color: #fff;
}
.face {
    background: #0866FF;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: #fff solid 2px;
    color: #fff;
}
.llamar {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: #fff solid 2px;
    color: #fff;
}
/*-------------Fin Top Navbar----------*/
/*-------------Incion de Navbar--------*/
.menu {
    background: #2980B9;
    background: -webkit-linear-gradient(to left, #2980B9, #6DD5FA, #FFFFFF, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to left, #2980B9, #6DD5FA, #FFFFFF, #FFFFFF, #6DD5FA, #2980B9);
    padding: 5px 20px;
    letter-spacing: 2px;
    width: 100%;
    height: 100%;
    z-index: 1;
    height: 50px;
    top: 40px;
}
nav a {
    color:#fff;
}

.peche {
    position: absolute;
    text-align: center;
    justify-content: center;
    align-items:baseline;
    top: 125px;
    left: 52%;
    margin-left: -150px;
    color: #0f2f76;
    font-family: Euphorigenic;
    font-size: 20px;
    font-weight: bold;
    z-index: 10;
}
.menu {
    margin: 0 auto;
    max-width: 100%;  
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
    
}
.menu ul li {
    float: none;
    display: inline-block;
}
.menu ul li:nth-child(1) {
    float: left;
}
.menu ul li:nth-child(2) {
    float: left;
}
.menu ul li:nth-child(3) {
    float: left;
}
.menu ul li a {
    color: #0f2f76;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: block;
    padding: 5px 8px;
    top: 50px;
}
.menu ul li .color_1:hover {
    border-bottom: #f5b112 solid 5px;
}
.menu ul li .color_2:hover {
    border-bottom: #0f2f76 solid 5px;
}
.menu ul li .color_3:hover {
    border-bottom: #ec3344 solid 5px;
}
.menu ul li .color_4:hover {
    border-bottom: rgb(45, 121, 26) solid 5px;
}
.menu ul li .color_5:hover {
    border-bottom: #5c363a solid 5px;
}
.menu ul li .color_6:hover {
    border-bottom: #999797 solid 5px;
}
/*.menu ul li .color_7 {
    background-color: #030918;
}*/
/*-------------Fin de NAvbar-----------*/
/*-------------Inicio Main-------------*/
.slider-box {
    width: 100%;
    height: 79vh;
    margin: auto 0;
    overflow: hidden;
    border-radius: 0px;
    border: solid 20px #030918;   
}
.slider-box ul {
    display: flex;
    padding: 0;
    width: 600%;
    animation: slide 20s infinite alternate ease-in-out;
}
.slider-box li {
    width: 100%;
    list-style: none;
    position: relative;
}
.slider-box img {
    width: 100%;
    height: 79vh;
    object-fit: fill;
    object-position: 50% 50%;
}
@keyframes slide {
    0% {margin-left: 0;}
    20% {margin-left: 0;}

    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
    100% {margin-left: -300%;}

    100% {margin-left: -400%;}
    125% {margin-left: -400%;}

    125% {margin-left: -500%;}
    150% {margin-left: -500%;}

    150% {margin-left: -600%;}
    175% {margin-left: -600%;}
}
.texto-1 {
    background: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    top: 5px;
    text-indent: 50px;
    line-height: 1.5;
}
.texto-1 h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    background: aliceblue;
    border-radius: 5px;
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
    width: 100%;
}
.texto-1 h3 {
    color:  rgba(27,69,166,1);
    background: aliceblue;
    text-align: left;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold; 
    text-indent: 0;
    font-size: 25px;
}
.galeria-1 {
    position: relative;
    padding: 5px 20px;
    border-radius: 5px;
    width: 100%;
    height: 75vh;
    box-shadow: 3px 3px 10px 1px rgb(135, 206, 250, 0.5);
    z-index: 4;
}
.galeria-1 h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
    width: 100%;
}
.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    top: 10px;
}
.parent img {
    height: 250px;
    width: 180px;
    border-radius: 5px;
    box-shadow: 3px 3px 10px 1px lightgrey;
}
.nom-1 {
    padding: 10px;
    font-size: 20px;
    font-family: louis_george_cafe;
    height: 45px;
    color: rgba(27,69,166,1);
}
.fot {
    border-radius: 100px;
    padding: 10px;
}
/*.certificados {
    display: flex;
    justify-content: space-between;
    background-color: white;
    position: relative;
    padding: 5px 20px;
    margin-left: 10px;
    text-align: justify;
    width: 70%;
    top: 5px;
}*/
.contenedor-1 h1 {
    position: absolute;
    text-align: center;
    color:  rgba(27,69,166,1);
    background: white;
    border-radius: 5px;
    box-shadow: 3px 3px 3px 0px lightgray;
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
    width: 70%;
}
.contenedor-1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background-color: aliceblue;
    position: relative;
    padding: 10px 20px;
    top: 5px;
}
.haccp {
    border-radius: 100px;
}
.acia {
    border-radius: 100px;
    background-color: aliceblue;
}
.sqfi {
    border-radius: 5px;
    width: 300px;
    padding: 0px;
    background-color: aliceblue;
    object-fit: contain;
    height: 200px;
}
#savoir {
    display: flex;
    justify-content: space-between;  
    background-color: #3b83bd;
    position: relative;
    padding: 5px 20px;
    top: 5px;
}
.savoir label {
    color: #00416A;
    background-color: aliceblue;
    padding: 10px;
    border-radius: 2px;
    border:  none;
    cursor: pointer;
    left: 50%;
    font-size: small;
    text-decoration: underline;
}
/*.savoir label:hover {
    color: whitesmoke;
    background-color: #00416A;
    background-color: #3b83bd;
    box-shadow: 7px 5px 7px 2px lightblue;
}*/
#btn1 {
    display: none;
}
.emergente-1 {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(144, 148, 150, 0.8);
    z-index: 50;
    display: none;
    justify-content: center;
    align-items: center;
}
#btn1:checked ~ .emergente-1 {
    display: flex;
}
.contenido-1 {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    text-align: justify;
}
.contenido-1 h2 {
    color: #0866FF;
    text-align: center;
}
.contenido-1 p {
    padding: 15px 0px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.contenido-1 .Btn-cerrar {
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
.contenido-1 .Btn-cerrar label {
    padding: 7px 10px;
    background-color: #3b83bd;
    color: aliceblue;
    box-shadow: 10px 10px 20px lightblue;
    border-radius: 5px;
    border:  none;
    cursor: pointer;
    font-weight: bold;
}
/*.cerrar-emergente  {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: transparent;
}*/
#btn2 {
    display: none;
}
.emergente-2 {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(144, 148, 150, 0.8);
    z-index: 50;
    display: none;
    justify-content: center;
    align-items: center;
}
#btn2:checked ~ .emergente-2 {
    display: flex;
}
.contenido-2 {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    text-align: justify;
}
.contenido-2 h2 {
    color: #0866FF;
    text-align: center;
}
.contenido-2 p {
    padding: 15px 0px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.contenido-2 .Btn-cerrar {
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
.contenido-2 .Btn-cerrar label {
    padding: 7px 10px;
    background-color: #3b83bd;
    color: aliceblue;
    box-shadow: 10px 10px 20px lightblue;
    border-radius: 5px;
    border:  none;
    cursor: pointer;
    font-weight: bold;
}
.savoir-3 {
    display: flex;
    justify-content: space-between;

}
.savoir-3 label {
    position: absolute;
    left: 1300px;
    background-color: #3b83bd;
    color: aliceblue;
    box-shadow: 10px 10px 20px lightblue;
    padding: 10px;
    border-radius: 5px;
    border:  none;
    cursor: pointer;
    font-weight: bold;
}
#btn3 {
    display: none;
}
.emergente-3 {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(144, 148, 150, 0.8);
    z-index: 50;
    display: none;
    justify-content: center;
    align-items: center;
}
#btn3:checked ~ .emergente-3 {
    display: flex;
}
.contenido-3 {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    text-align: justify;
}
.contenido-3 h2 {
    color: #0866FF;
    text-align: center;
}
.contenido-3 p {
    padding: 15px 0px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.contenido-3 .Btn-cerrar {
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
.contenido-3 .Btn-cerrar label {
    padding: 7px 10px;
    background-color: #3b83bd;
    color: aliceblue;
    box-shadow: 10px 10px 20px lightblue;
    border-radius: 5px;
    border:  none;
    cursor: pointer;
    font-weight: bold;
}
.texto-2 {
    background-color: white;
    position: relative;
    padding: 5px 20px;
    margin-left: 10px;
    text-align: justify;
    top: 5px;
    border-top-left-radius: 5px;
    text-indent: 50px;
    line-height: 1.5;
}
.productos {
    background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    text-indent: 50px;
    line-height: 1.5;
    top: 5px;
}
.productos h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    background: aliceblue;
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
    width: 100%;
}
.productos h2 {
    color:  rgba(27,69,166,1);
    background: aliceblue;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    padding: 5px;
    width: 300px;
}
.productos h3 {
    color:  rgba(27,69,166,1);
    background: aliceblue;
    text-align: left;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold; 
    text-indent: 0;
    font-size: 25px;
}
.promo {
    width: 88%;
    border-radius: 10px;
    transition: 0.5s ease-in-out;
}
.promo:hover {
    box-shadow: 0px 0px 20px 0px lightseagreen;
    z-index: 10;
}
.nombre {
    position: relative;
    display: flex;
    left: 50px;
    background-color: aliceblue;
    color: #111;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 5px;
    width: 88%;
    border-radius: 5px;   
}
.nombre h3 {
    color: rgba(27,69,166,1);
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 25px;
    font-family:louis_george_cafe, sans-serif, Euphorigenic;
    font-weight: bolder;
    line-height: 1.5;
}
.crabe {
    position: relative;
    border-radius: 5px;
    border:  3px solid rgb(3, 9, 24);
    box-shadow: -3px -3px 3px 0px lightgrey;
}
.temporada {
    border-radius: 5px;
    width: 100%;
}
.homard {
    position: relative;
    display: flex;
    border-radius: 10px;
    border: 3px solid #030918;
    box-shadow: -3px -3px 3px 0px lightgrey;

}
/*.homard {
    flex: 1;
}*/

.langosta {
    display: flex;
    justify-content: space-around;
    padding-bottom: 20px;
    z-index: 5;
}
.langosta_0 {
    border-radius: 10px;
    box-shadow: 10px 10px 20px lightblue;
    transition: all 0.3s;
}
.langosta_0:hover {
    transform: scale(1.2) rotate(-2deg);
}
.langosta_1 {
    border-radius: 10px;
    box-shadow: 10px 10px 20px lightblue;
    transition: all 0.3s;
}
.langosta_1:hover {
    transform: scale(1.2) rotate(2deg);
}
.langosta_2 {
    border-radius: 10px;
    box-shadow: 10px 10px 20px lightblue;
    transition: all 0.3s;
}
.langosta_2:hover {
    transform: scale(1.2) rotate(-2deg);
}
.langosta_3 {
    border-radius: 10px;
    box-shadow: 10px 10px 20px lightblue;
    transition: all 0.3s;
}
.langosta_3:hover {
    transform: scale(1.2) rotate(2deg);
}
.contenedor {
    display: flex;
    margin: 0px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    height: 400px;
}
.fot {
    border-radius: 20px;
    background-color: rgb(3, 9, 24, .9);
    justify-content: space-around;
}
.ubicacion {
    background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    top: 5px;
    text-indent: 50px;
    line-height: 1.5;
}
.ubicacion h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    border-radius: 5px;
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
}
.ubicacion-mapa {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: rgb(3, 9, 24, .9);
    padding: 10px 5px;
}
/*--------------Fin Main--------------*/
/*--------------Inicio Footer---------*/
.footer {
    position: relative;
    display: flex;
    bottom: 0;
}
#footer {
    align-items: center;
    background: #2980B9;
    color: #fff;
    padding: 10px 25px;
    width: 100%;
    height: auto;
}
#footer ul {
    list-style: none;
    
}
#footer li a {
    text-decoration: none;
    color: #fff;
    padding: 15px 10px;
    font-size: 16px;
    text-align: center;
}
#footer ul li a {
    left: 500px;
}
.derechos {
    text-align: center;
}
.scroll {
    position: fixed;
    bottom: 2.2rem;
    border-top: 2rem;
    right: 3.2rem;
    z-index: 10;
}
.flecha {
    font-size: 25px;
    background-color: rgb(3, 9, 24, .5);
    color: rgb(240, 248, 255);
    padding: 10px;
    border-radius: 5px;
}
.flecha:hover {
    color: skyblue;
    background-color: rgb(3, 9, 24);
}
.flecha:active {
    color: red;
    background-color: #F7B20F;
}
/*--------------Fin Footer---------*/
/*--------------Inicio sidebar--------*/
.actualidades {
    background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    height: auto;
    z-index: 2;

}
.actualidades h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
}
.facebook {
    height: 70vh;
    width: 100%;
    padding: 5px 10px;
}
.youtube {
    background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    height: auto;
    z-index: 2;
}
.youtube h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
}
.youtu {
    height: 80%;
    width: 80%;
    object-fit: contain;
}
.FAQ {
    background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    height: auto;
    z-index: 2;

}
.FAQ h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
}
.FAQ h3 {
    color:  rgba(27,69,166,1);
    border-radius: 5px;
    box-shadow: 3px 3px 3px 0px lightblue;
    display: block;
    cursor: pointer;
    width: 80%;
}
details {
    border-radius: 5px;
    box-shadow: 3px 3px 10px 0px lightblue;
    padding: 10px 15px;
    cursor: pointer;
}
details > div {
    border-top: #0309181f solid 1px;
    padding: 10px;
    text-align: justify;
    line-height: 1.5;
}
summary {
    color:  rgba(27,69,166,1);
    list-style: none;
    font-size: 25px;
    font-weight: bold;
}
summary::before {
    content: '+';
    padding-right: 5px;
}
details [open] summary::before {
    content: '-';
    padding-right: 5px;
}
.Emploi {
   background-color: aliceblue;
    position: relative;
    padding: 5px 20px;
    text-align: justify;
    height: auto;
    z-index: 2;
}
.Emploi h1 {
    text-align: center;
    color:  rgba(27,69,166,1);
    text-align: center;
    font-family: Euphorigenic;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 40px;
    padding: 5px;
}
/*--------------Fin sidebar-----------*/
.header {
    grid-area: header;
    
}
.navbar {
    grid-area: navbar;
   
}
.main {
    grid-area: main;
    
}
.sidebar {
    grid-area: sidebar;
    
}
.footer {
    grid-area: footer;
    
}
/*@media (min-width:460px) {
    .grid-container {
        grid-template: 
        "header header"  100px
        "navbar navbar"  50px
        "main   sidebar" auto
        "footer footer"  200px/
        auto    300px;
    }
}*/
@media (min-width:768px) {
    .grid-container {
        grid-template: 
        "header header"  100px
        "navbar navbar"  50px
        "main   main"    auto
        "sidebar sidebar" 200px
        "footer footer"  200px/
        auto    300px;
    }
}
@media (min-width:900px) {
    .grid-container {
        grid-template: 
        "header header"  100px
        "navbar navbar"  50px
        "main   sidebar" auto
        "footer footer"  300px/
        auto    350px;
    }
}