/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 8 nov. 2021, 9:56:14
    Author     : David Robles Gaona <david.robles.gaona@gmail.com>
*/

@font-face{
    font-family: "Ballon";
    src: url("../fuentes/balloon_regular.woff");
}
@font-face{
    font-family: "Lucida";
   src: url("../fuentes/LHANDW.woff");
}
@font-face{
    font-family: "Raleway";
    src: utl("../fuentes/raleway.regular-webfont.woff");
    src: utl("../fuentes/raleway.regular-webfont.woff2");
}

:root{
    --colorRojo: #ae2029;
    --colorAmarillo: #f6ea00;
    --colorVerde: #1c542d;
    --triad-green: #497a00;
    --analogous-green: #007a6e;
    --analogous-morado: #000c7a;
    --analogous-azul: #00497a;
}


/** Estilo generales **/

html{
        scroll-behavior: smooth;
}
body{
    font-family: "Raleway";
}
a{
    color: #000 !important;
}
a:hover{
    color: var(--colorVerde) !important;
    text-decoration: none;
}
.font-lucida{
    font-family: "Lucida";
}

section{
    margin: auto;
    text-align: center;
}

/********** Estilos para el conenedor del vídeo ***************/
.wrapper{
    height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
    
}
.video-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    overflow: hidden;
    border-bottom: 8px var(--colorVerde) solid;
}
.video-wrap video{
    min-height: 100%; 
    min-width: 100%;
}
.overlay{
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--colorAmarillo);
    opacity:.9;    
}
.landing-text{
    z-index: 2;
    padding: 32px;
    color: #c11b00;
    position: absolute;
    /*bottom: 0rem;*/
    top: 55%;
}
.landing-img{
    width: 75%;
}

/************* Estilos para elemento especí­ficos *************************/
h1, h2, h3, h4, h5 {
    font-family: "Lucida";
}
p{
    font-size: 1.2em;
}
.text-cordobilla{
    font-family: "Lucida";
    color: var(--colorRojo);
    text-shadow: 1px 1px #000; 
}

/*********** Estilos para modals ************************************/
.modal-header h5, .modal-body h5{
    font-family: "Raleway";
}

h4.modal-title  {
    font-size:2em;
    font-family: "Raleway";
}

.modal-body p{
    font-size: .9em;
}

/************** Estilos para fondos e imágenes *************************************/

.bg-principal{
    padding: 50px 0;
    background-color: rgba(246,234,0,.6) !important;
    border-bottom: 8px var(--colorVerde) solid;
}

.parallax-action{
    background-image: url("../galeria/images/fondos/cuenco_patatas.jpeg");  
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8rem auto;
}
.text-parallax-action {
    font-weight: bold; 
    background: #ae2029; 
    -webkit-background-clip: text; 
    -moz-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    text-shadow: 0px 3px 5px rgba(255,255,255,0.1),0px -1px 3px rgba(193,27,0,0.7);
}
.parallax-alergenos{
    background-image: url("../galeria/images/fondos/Recorte6.png");  
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
}
.hr-cordobilla{
    border-bottom: 4px solid var(--colorVerde);    
}
.img-product{
    transition: transform .2s;
}
 
.img-product:hover {
    transform: scale(1.5); 
    z-index: 99;
}

.hide{
    display:none;
}
/************ Estilos de texto ***************************************************/

.text-verde{    
    color:var(--colorVerde);
}

.p4x{
    font-size: 8em;
    font-weight: 400;
}
.p3x{
    font-size: 4em;
    font-weight: 400;
}
.p2x{
    font-size: 2em;
}
.col-md-3 a{
    color:var(--colorVerde) !important;
}
.col-md-3 a:hover{
    color:#fff !important;
}
/**************************** Estilos para botones *******************************/
#btnToTop{
    display: none;
    position: fixed;
    bottom: 25px;
    right: 0px;
    z-index: 99;
    font-size: 2em;
    border: none;
    outline: none;
    color: #343a40;
    background-color: transparent;
    cursor: pointer;
    padding: .8em; 
}
/****************************  Footer  *******************************************/
footer{
    padding: 32px;    
}
.parallax-footer{
    background-image: url("../galeria/images/fondos/Recorte7.png");  
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8rem auto;
}
iframe{
    margin: 1em 0em;
    border: none;
    width: 100%;
    min-height: 350px; 
}
/****************************  Media Querys  *******************************************/

@media (max-width: 750px) {
  .p2x {
    font-size: 1.5em;
  }
  .p3x {
    font-size: 3.5em;
  }
  .p4x {
    font-size: 5.3em;
  }
  .landing-text{
    top: 55%;
}
}
@media (max-width: 450px) {
  .p2x {
    font-size: 1.3em;
  }
  .p3x {
    font-size: 2.3em;
  }
  .p4x {
    font-size: 3.3em;
  }
    .landing-text{
    top: 62%;
}
}