/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/* ANIMATIONS */

@-webkit-keyframes fadeInandOut {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInandOut {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* FOR ALL DEVICES */

@media screen {
    * {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    /*In Chrome Phone the background cover didnt work properly without this*/
    /*They claim that only needed either height or min-height of html and nothing else. I didnt try*/
    html {
        height: 100%;
        min-height: 100%;
    }

    body {
        min-height: 100%;
    }

    body {
        font-family: "Roboto";
        color: rgb(20, 20, 20);
        line-height: 1.6;
        font-size: 100%;
        margin: 0;
        padding: 0;
        /*background-image: url('img/cabecera2.jpg');*/
        /*NEW*/
        background-position: center;
        background-size: cover;
        background-image: url('img/cabecera.jpg');
        background-color: rgb(242, 242, 242);
        background-repeat: no-repeat;
        background-attachment: fixed;
        /*backdrop-filter: blur(5px);*/
    }
    
    body.home{
        /*background-image: url('img/cabecera.jpg');*/
        
    }

    strong {
        color: rgb(50, 50, 50);
        font-weight: 700;
    }

    a {
        color: rgb(122, 188, 50);
        text-decoration: none;
        margin: 0;
        padding: 0;
    }

    p {
        margin: 5px 1%;
        padding: 1%;
    }

    /*All the checkboxes themselves wlil be hidden all the time*/
    input[type="checkbox"] {
        display: none;
    }

    blockquote,
    .nota {
        font-family: "Roboto";
        text-align: center;
    }

    blockquote {
        font-size: 150%;
    }

    /* HEADER */
    header {
        position: fixed;
        z-index: 10;
        right: 40px;
        top: 0px;
        max-height: 65px;
        /* Use instead of height to work as height auto*/
        overflow: hidden;
        /*To de the effect of growing the height*/
        /*Try to matain the menu on the top*/
        padding: 4px 3%;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 0 0 20px 20px;
        -webkit-transition: max-height 800ms ease;
        -o-transition: max-height 800ms ease;
        transition: max-height 800ms ease;
        /* Use instead of height to work as height auto*/
        border: rgb(130, 130, 130) solid 2px; /*#d1d1d1*/
        border-top: none;
    }

    header label {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }

    #botonmenu:checked ~ header {
        max-height: 500px;
        /* Use instead of height to work as height auto. It will never reach that point*/
    }

    .logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
        margin-right: 10px;
        height: 50px;
        vertical-align: text-top;
    }
    

    h1 {
        font-weight: bold;
        font-size: 170%;
        font-family: 'Poiret One', cursive;
        margin: 0;
        padding: 0;
        color: #517D20;
    }

    .nombre {
        font-family: 'Poiret One', cursive;
        font-weight: bold;
        font-size: 110%;
    }

    .negro {
        color: rgb(38,38,38);
    }

    .verde {
        color: rgb(101, 154, 42);
    }

    /* MENU */
    nav {
        margin: 10px 0;
        font-size: 120%;
        font-family: "Roboto";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center;
    }

    nav a {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
        line-height: 250%;
        margin: 0;
        -webkit-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        color: rgb(100, 100, 100);
    }

    nav a:hover {
        color: #517D20;
    }

    /*IMAGEN CABECERA */
    .slide {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        height: 50vh;
        /*NEW*/
        padding: 5%;
        /*background: rgba(0,0,0,0.9);*/
        color: white;
        text-shadow: 2px 2px 2px rgba(0,0,0,0);
        text-transform: uppercase;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        font-family: "Poiret One";
        font-size: 6vh;
        line-height: 120%;
    }
    


    .home .slide {
        font-size: 10vh;
        height: 100vh;
    }
    
    .slide p{
        background-color: rgba(0,0,0,0.8);
        padding:0.5em;
    }

    /* SCROLL DOWN ARROW*/
    img.scrolldown {
        /*NEW*/
        /*position: absolute;
        z-index: 5;
        right: 50%;
        bottom: 10px;
        transform: translateX(50%);*/
        -webkit-animation-name: blink;
                animation-name: blink;
        -webkit-animation-iteration-count: 2;
                animation-iteration-count: 2;
        -webkit-animation-duration: 1.5s;
                animation-duration: 1.5s;
    }

    /*CUERPO*/
    .separator{
        height: 3em;
        background-color: rgba(0,0,0,0.7);
    }
    article {
        margin: 0;
        padding: 50px 2%;
        background-color: white;
    }
    
    article > *{
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }
    
    article.reverse {
        background-color: rgba(0,0,0,0.9);
        color: rgb(226, 226, 226);
    }
    
    article.reverse h2, article.reverse h3{
        color:white;
    }
    
    article.reverse strong, article.reverse .verde, article.reverse a{
        color: #b0dc82;
    }


    article.reverse > p{
        color: rgb(226, 226, 226);
    }

    
    article:last-child {
        margin-bottom: 0;
    }

    .button {
        display: block;
        width: 140px;
        line-height: 250%;
        margin: 2em auto 1em;
        text-align: center;
        background: -o-radial-gradient(#7cb33f,#55861e);
        background: radial-gradient(#7cb33f,#55861e);
        color: white;
        border-radius: 5px;
        -webkit-transition: -webkit-transform 300ms ease-out;
        transition: -webkit-transform 300ms ease-out;
        -o-transition: transform 300ms ease-out;
        transition: transform 300ms ease-out;
        transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
    }

    .button:hover {
        /*background-color: rgb(101, 193, 1);*/
        -webkit-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
                transform: scale(1.1, 1.1);
    }

    h2 {
        text-align: center;
        font-size: 300%;
        line-height: 150%;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        text-transform: uppercase;
        font-family: "Poiret One";
        /*color: #517D20;*/
        color: black;
        /*background-color: #F0F0F0;*/
    }

    article > p{
        font-size: 125%;
        /*max-width: 880px;*/
        color: rgb(100, 100, 100);
        margin: 0 auto;
        text-align:center;
        padding-left:3%;
        padding-right:3%;
    }
    
    .introduction {
        text-align:justify;
    }
    
    .sections {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 0;
        margin: 1em auto;
    }

    section {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        margin: 1em 3%;
        min-width: 250px;
        max-width: 500px;
        
        /*FIXED por Firefox que sin height no computa el % del flex bien*/
        /* Asi no funciona en iphone 6. Lo pengo con media query el fila a columna
	min-width:300px;
	*/
        overflow: hidden;
        background-image: none;
    }

    h3 {
        font-size: 160%;
        margin: 1.5em 0;
        padding: 0;
        color: black;
        /*rgb(64,64,64);*/
        text-align: center;
        font-weight: 500;
    }
    
    article h1{
        margin: 1.3em 0;
        padding: 0;
        text-align: center;
    }

    section ul {
        list-style-type: circle;
        padding-left: 20px;
    }

    .home section li {
        height: 4em;
        
    }
    
    .home section li:nth-child(odd) {
        background-color: rgb(250,250,250);
    }
    

    section img,
    .divimagen {
        margin: 0 auto;
        max-width: 100%;
        /*Para que no sobresalga*/
        display: block;
        
    }
    
    article:not(.reverse) section img,
    article:not(.reverse) .divimagen {
        max-height:150px;
    }
    
    .icono,
    .icono img {
        
        height: 125px; /*Para igualarlos iconos */
    }

    .divimagen {
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        line-height: 100%;
    }

    .motion3pictures {
        position: relative;
        max-width: 150px;
    }

    .motion3pictures img {
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-animation-name: fadeInandOut;
                animation-name: fadeInandOut;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-duration: 6s;
                animation-duration: 6s;
        opacity: 0;
    }

    .motion3pictures img:nth-child(1) {
        -webkit-animation-delay: 0s;
                animation-delay: 0s;
    }

    .motion3pictures img:nth-child(2) {
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
    }

    .motion3pictures img:nth-child(3) {
        -webkit-animation-delay: 4s;
                animation-delay: 4s;
    }

    .textoicono {
        color: #517d20;
        font-size: 1000%;
        line-height: 75%;
        height: 125px;
        /*MODIFIED*/
    }

    .precio {
        font-size: 300%;
    }

    .precio .cantidad {
        font-weight: bold;
        color: rgb(100, 100, 100);
    }

    .precio .moneda {
        color: rgb(85, 132, 33);
        font-size: 130%;
        vertical-align: bottom;
    }

    .precio .promocion {
        font-size: 40%;
        font-weight: bold;
        color: rgb(214, 141, 2);
    }

    /* CONTACTO */
    .telefono,
    .email,
    .facebook {
        background: url('img/contacto.png') no-repeat;
        display: inline-block;
        vertical-align: sub;
        width: 26px;
        height: 26px;
        padding: 0 18px;
    }

    .telefono {
        background-position: 0px -28px;
    }

    .email {
        background-position: 0px 0px;
    }

    .facebook {
        background-position: 0px -60px;
    }

    /* FOOTER */
    footer {
        text-align: center;
        padding: 2em 0;
        background-color: rgb(72, 72, 72);
        color: white;
    }

    footer img {
        width: 20px;
        margin: 0 5px;
        vertical-align: text-top;
    }

    footer a {
        color: white;
    }
    
    footer .verde{
        color: #b0dc82;
    }
}

/*********************** DIFFERENT DEVICES *****************************/

@media (max-width: 610px) {

    /* 
    .sections {  
        align-items: center;
    */

    article:not(.reverse) section:not(:last-child) {
        /*flex: none;*/
        /*FOr internet explorer not to collapse elements*/
        border-bottom: dashed 2px rgb(225, 225, 225);
        padding-bottom: 2em;
        /*FIXED por Firefox que sin height no computa el % del flex bien*/
    }
    
    h3 {
        font-size: 150%;
    }
    
    h2 {
        font-size: 220%;
    }
    
    h2 .logo {
        vertical-align: top;
    }
    
    .home .slide {
        font-size: 10vw;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

}


@media (max-width: 400px) {
    
    
    header {
        right: 50%;
        -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
                transform: translateX(50%);
    }
    
}