/** RESET **/ * { padding: 0; margin: 0; font-size: 100%; line-height: 1; border: 0; -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } html { box-sizing: border-box; } h2, h3, h4 { font-weight: normal; } /** ABSTRACTS **/ .section_carousel .owl-item > div a:after, .section_carousel > div:not(.owl-controls) a:after, .featured-recipe-collection:after { background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); background-image: -webkit-gradient(linear, top top, top bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.3))); background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); background-image: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); } @font-face { font-family: "FSMatthewWeb-Light"; src: url("fonts/FSMatthewWeb-Light.eot"); src: url("fonts/FSMatthewWeb-Light.eot?#iefix") format("embedded-opentype"), url("fonts/FSMatthewWeb-Light.woff") format("woff"), url("fonts/FSMatthewWeb-Light.ttf") format("truetype"), url("fonts/FSMatthewWeb-Light.svg#FSMatthewWeb-Light") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "FSMatthewWeb-Regular"; src: url("fonts/FSMatthewWeb-Regular.eot"); src: url("fonts/FSMatthewWeb-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/FSMatthewWeb-Regular.woff") format("woff"), url("fonts/FSMatthewWeb-Regular.ttf") format("truetype"), url("fonts/FSMatthewWeb-Regular.svg#FSMatthewWeb-Regular") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "FSMatthewWeb-Medium"; src: url("fonts/FSMatthewWeb-Medium.eot"); src: url("fonts/FSMatthewWeb-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/FSMatthewWeb-Medium.woff") format("woff"), url("fonts/FSMatthewWeb-Medium.ttf") format("truetype"), url("fonts/FSMatthewWeb-Medium.svg#FSMatthewWeb-Medium") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "FSMatthewWeb-Bold"; src: url("fonts/FSMatthewWeb-Bold.eot"); src: url("fonts/FSMatthewWeb-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/FSMatthewWeb-Bold.woff") format("woff"), url("fonts/FSMatthewWeb-Bold.ttf") format("truetype"), url("fonts/FSMatthewWeb-Bold.svg#FSMatthewWeb-Bold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans.eot"); src: url("fonts/opensans.eot?#iefix") format("embedded-opentype"), url("fonts/opensans.woff") format("woff"), url("fonts/opensans.ttf") format("truetype"), url("fonts/opensans.svg#Open Sans") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "Open Sans Light"; src: url("fonts/opensans-light.eot"); src: url("fonts/opensans-light.eot?#iefix") format("embedded-opentype"), url("fonts/opensans-light.woff") format("woff"), url("fonts/opensans-light.ttf") format("truetype"), url("fonts/opensans-light.svg#Open Sans Light") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "Open Sans Semibold"; src: url("fonts/opensans-semibold.eot"); src: url("fonts/opensans-semibold.eot?#iefix") format("embedded-opentype"), url("fonts/opensans-semibold.woff") format("woff"), url("fonts/opensans-semibold.ttf") format("truetype"), url("fonts/opensans-semibold.svg#Open Sans Semibold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "Open Sans Bold"; src: url("fonts/opensans-bold.eot"); src: url("fonts/opensans-bold.eot?#iefix") format("embedded-opentype"), url("fonts/opensans-bold.woff") format("woff"), url("fonts/opensans-bold.ttf") format("truetype"), url("fonts/opensans-bold.svg#Open Sans Bold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSansNo1-Light"; src: url("fonts/SharpSansNo1-Light.eot"); src: url("fonts/SharpSansNo1-Light.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSansNo1-Light.woff") format("woff"), url("fonts/SharpSansNo1-Light.ttf") format("truetype"), url("fonts/SharpSansNo1-Light.svg#SharpSansNo1-Light") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSans-Bold"; src: url("fonts/SharpSans-Bold.eot"); src: url("fonts/SharpSans-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSans-Bold.woff") format("woff"), url("fonts/SharpSans-Bold.ttf") format("truetype"), url("fonts/SharpSans-Bold.svg#SharpSans-Bold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSans-Extrabold"; src: url("fonts/SharpSans-Extrabold.eot"); src: url("fonts/SharpSans-Extrabold.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSans-Extrabold.woff") format("woff"), url("fonts/SharpSans-Extrabold.ttf") format("truetype"), url("fonts/SharpSans-Extrabold.svg#SharpSans-Extrabold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSans-Medium"; src: url("fonts/SharpSans-Medium.eot"); src: url("fonts/SharpSans-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSans-Medium.woff") format("woff"), url("fonts/SharpSans-Medium.ttf") format("truetype"), url("fonts/SharpSans-Medium.svg#SharpSans-Medium") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSansNo1-Semibold"; src: url("fonts/SharpSansNo1-Semibold.eot"); src: url("fonts/SharpSansNo1-Semibold.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSansNo1-Semibold.woff") format("woff"), url("fonts/SharpSansNo1-Semibold.ttf") format("truetype"), url("fonts/SharpSansNo1-Semibold.svg#SharpSansNo1-Semibold") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @font-face { font-family: "SharpSansNo1-Book"; src: url("fonts/SharpSansNo1-Book.eot"); src: url("fonts/SharpSansNo1-Book.eot?#iefix") format("embedded-opentype"), url("fonts/SharpSansNo1-Book.woff") format("woff"), url("fonts/SharpSansNo1-Book.ttf") format("truetype"), url("fonts/SharpSansNo1-Book.svg#SharpSansNo1-Book") format("svg"); font-weight: normal; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .opensans { font-family: 'Open Sans', sans-serif; } .opensans-light { font-family: 'Open Sans Light', sans-serif; } .opensans-semibold { font-family: 'Open Sans Semibold', sans-serif; } .opensans-bold { font-family: 'Open Sans Bold', sans-serif; } .fsmatthewweb-light, .thumbnails.recipes > li .thumbnail-body h4 { font-family: 'FSMatthewWeb-Light', sans-serif; -webkit-font-smoothing: antialiased; } .helvetica, .top-header-container > .top-header, .scroll span { font-family: helvetica, "Arial", sans-serif; } .light, body, h4, p, body.page-contact-us .contact-us .content b, #connect-with-us h2, body.page-recipes #recipesFilter li a, #recipe-details-full .share-wrapper .rating-wrapper #votes, .carousel .owl-item > div a var, #getsocial .getsocial-header .title + div p, #getsocial .getsocial-header .social-icons + div p, #getsocial ul.feed .twitter .__processTwitterText p, .performance-facts p, .performance-facts td, .performance-facts th, #our-recipes .title_sub, .videolist li h3, .videolist li p { font-family: 'SharpSansNo1-Light', sans-serif; -webkit-font-smoothing: antialiased; } .regular, .top-header-container > .top-header .consumer-alert-container, #mobile-menu, #mobile-menu .mobile-menu-footer-links a, .to-location-container, .to-newsletter, .title + p, .goodnessofjuice .goodnessofjuice-first .description, body.page-admin.not-logged-in #block-user-login, .social-buy-it h4, #recipe-details-full .recipe-description-and-options .desc, #recipe-details-full .recipe-description-and-options #votes, #recipe-details-full .ingredients-and-directions a.linkable, #recipe-details-full .ingredients-and-directions ul.ingredients-list > li, #recipe-details-full .ingredients-and-directions p, #recipe-details-full .ingredients-and-directions .directions ol li, .carousel .owl-item > div a span, #slider .slide p, .featured-recipe-collection .fakelink, #getsocial ul.feed .twitter > div > a, #getsocial ul.feed .twitter .share-options a, #newsletter-form legend, #newsletter-form .section input, #newsletter-form .section.first > *, #newsletter-form .section.second > label.newsletter_validator_msg, #newsletter-disclaimer p, .performance-facts tbody > tr td, .performance-facts tbody > tr th, .promotion > .content p, #search-popover-input, .videolist li .share-video > a, .view-more a { font-family: 'FSMatthewWeb-Regular', sans-serif; -webkit-font-smoothing: antialiased; } .medium, footer .footer-items .footer-item .footer-social .socials, footer .footer-items .footer-item .copyright, footer .footer-items .footer-item.footer-links a, #submenu ul li > .left-side p, #submenu ul li > .right-side p, #submenu ul li > .right-side a, section.section-body._products-category div.en_desc p, section.section-body._products-category div.fr_desc p, .goodnessofjuice .goodnessofjuice-nutrition .info .info-content, section.aboutus .subtitle, section.aboutus .about_us_wrapper .element p, .product-details > .container > div > div.copy-for-description h2, .product-details > .container > div > div.copy-for-description p, .product-details .bottom-disclaimer, #nutrition-facts .serving-size, #recipe-details-full .recipe-description-and-options h2, .faqs .panel p, .faqs-contact .body .option .right p, .benefits .list > div .description div, .benefits .list > div .description p, #getsocial .getsocial-header .social-disc .social-text a, .navigator .content-links a span, section.pre-product p, #search-popover #search-cnt > div span, #search-popover #results > div h2, #search-popover #results ul li a h3 { font-family: 'SharpSans-Medium', sans-serif; -webkit-font-smoothing: antialiased; } .bold, #mobile-menu .mobile-menu-options .mobile-menu-option, #submenu ul li > .left-side a.link, .goodnessofjuice .goodnessofjuice-first .description span, .product-details .title-container h1, #recipe-details-full .recipe-title h2, #recipe-details-full .header-bar time, .faqs .panel a, .faqs-contact .body .option h3, .benefits .list > div .description div span, .benefits .list > div .description div strong, .benefits .list > div .description p span, .benefits .list > div .description p strong, .featured-product .title-button-container h3, .featured-recipe-collection h3, .performance-facts .info-header, .promotion > .content h2, .promotion > .content h2 em, .routine .content .description div strong, .routine .content .description p strong, .thumbnails > li .thumbnail-body h4 { font-family: 'SharpSans-Bold', sans-serif; -webkit-font-smoothing: antialiased; } .extrabold, h1, h2, h3, body.node-type-products .linkable, .page-strawberrybanana .linkable, .page-peachpassionfruit .linkable, #recipe-details-full .ingredients-and-directions .linkable, .top-header-container nav ul li > a, #language, .title, .goodnessofjuice .goodnessofjuice-first h2, .goodnessofjuice .goodnessofjuice-second h2, .goodnessofjuice .goodnessofjuice-third h2, .goodnessofjuice .goodnessofjuice-nutrition .circle span, .goodnessofjuice .goodnessofjuice-nutrition .legend, .goodnessofjuice .goodnessofjuice-nutrition .info .info-title, section.aboutus .title, section.aboutus .about_us_wrapper .element h2, section.aboutus .about_us_wrapper .element h3, .product-details .title-container h1 strong, .faqs-contact .body h2, .benefits .grid > div h2, .benefits .list > div h3, .btn, #slider .slide h2, .product-categories > li .smaller h3, .routine .content h2, .thumbnails > li .thumbnail-body h4 strong { font-family: 'SharpSans-extrabold', sans-serif; -webkit-font-smoothing: antialiased; } .semibold, .goodnessofjuice .goodnessofjuice-second p, .goodnessofjuice .goodnessofjuice-third p, .faqs .to-open-faq, .benefits .grid > div .description div, .benefits .grid > div .description p, .routine .content .description div, .routine .content .description p { font-family: 'SharpSansNo1-Semibold', sans-serif; -webkit-font-smoothing: antialiased; } .book { font-family: 'SharpSansNo1-Book', sans-serif; -webkit-font-smoothing: antialiased; } .special, .no-results { font-family: 'Pacifico', cursive; font-weight: normal; } @media (max-width: 767px) { .medium-mobile { font-family: 'FSMatthewWeb-Medium', sans-serif; } .bold-mobile, body.node-type-products #product-title-mobile { font-family: 'FSMatthewWeb-Bold', sans-serif; } } @-moz-keyframes scale { 0% { -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } 70% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes scale { 0% { -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } 70% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes scale { 0% { -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } 70% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes scale { 0% { -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } 70% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-moz-keyframes bounce { 0% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounce { 0% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes bounce { 0% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounce { 0% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes translatey { 0% { -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -ms-transform: translate3d(0px, 0, 0); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(0px, 5px, 0); -o-transform: translate3d(0px, 5px, 0); -ms-transform: translate3d(0px, 5px, 0); -webkit-transform: translate3d(0px, 5px, 0); transform: translate3d(0px, 5px, 0); } } @-webkit-keyframes translatey { 0% { -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -ms-transform: translate3d(0px, 0, 0); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(0px, 5px, 0); -o-transform: translate3d(0px, 5px, 0); -ms-transform: translate3d(0px, 5px, 0); -webkit-transform: translate3d(0px, 5px, 0); transform: translate3d(0px, 5px, 0); } } @-o-keyframes translatey { 0% { -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -ms-transform: translate3d(0px, 0, 0); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(0px, 5px, 0); -o-transform: translate3d(0px, 5px, 0); -ms-transform: translate3d(0px, 5px, 0); -webkit-transform: translate3d(0px, 5px, 0); transform: translate3d(0px, 5px, 0); } } @keyframes translatey { 0% { -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -ms-transform: translate3d(0px, 0, 0); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 100% { -moz-transform: translate3d(0px, 5px, 0); -o-transform: translate3d(0px, 5px, 0); -ms-transform: translate3d(0px, 5px, 0); -webkit-transform: translate3d(0px, 5px, 0); transform: translate3d(0px, 5px, 0); } } .animated-delay-200 { animation-delay: 200ms; } /* BASE STYLES */ * { outline: 0; } html, body { height: 100%; } body { background: #ffffff; } h1, h2, h3 { color: #00833e; font-size: 64px; line-height: 1; font-weight: normal; } h4 { font-size: 21px; font-weight: bold; line-height: 25px; } p { font-size: 17px; } hr { display: block; width: 70px; height: 4px; background: rgba(0, 0, 0, 0.1); margin: 10px auto 20px auto; border: 0; } sup, sub { font-size: 50%; vertical-align: baseline; position: relative; top: -0.70em; left: 0.05em; } sub { top: 0.4em; } sup.clear-sup { font-family: 'Arial', sans-serif; font-size: 60%; font-weight: bold; top: -.5em; } input { -webkit-appearance: none; border-radius: 0; } input[type="checkbox"] { -webkit-appearance: checkbox; } .hide_desktop { display: none; } .hide_mobile { display: block; } @media (min-width: 981px) and (max-width: 1024px) { html, body { height: auto; } h1, h2, h3 { font-size: 60px; line-height: 1.2; } } @media (max-width: 980px) { html, body { height: auto; } h1, h2, h3 { font-size: 55px; line-height: 1.2; } } @media (max-width: 767px) { h1, h2, h3 { font-size: 50px; line-height: 1.2; } body { overflow-x: hidden; } hr { height: 1px; width: 90%; } .hide_mobile { display: none; } .hide_desktop { display: block; } } @media (max-width: 767px) { /*.visible-mobile { display: block !important; }*/ .visible-nomobile { display: none !important; } /*.visible-mobile-inline { display: block !important; } .visible-nomobile-inline { display: none !important; }*/ } @media (min-width: 768px) { .visible-mobile { display: none !important; } /*.visible-nomobile { display: block !important; } .visible-mobile-inline { display: none !important; } .visible-nomobile-inline { display: block !important; }*/ } footer .container:after, footer .footer-items .footer-item .footer-social:after, .grid.row50 > .container:after, .top-header-container nav:after, #slider-brands:after, #submenu ul:after, .top-header-container > .top-header:after, section.aboutus .about_us_wrapper:after, .product-details > .container > div:after, .social-buy-it:after, #recipe-details-full .header-bar ul:after, #recipe-details-full .recipe-description-and-options:after, #recipe-details-full .recipe-description-and-options > ul:after, #recipe-details-full .ingredients-and-directions:after, #recipe-details-full .ingredients-and-directions ul.ingredients-list:after, #getsocial .getsocial-header:after, #getsocial .getsocial-header .social-disc:after, #getsocial .getsocial-header .social-disc .social-icons:after, #getsocial ul.feed:after, .navigator:after, .navigator .content-links:after, .thumbnails:after, .videolist:after, .videolist li:after, .videolist li .share-video:after { content: " "; display: table; clear: both; } body.node-type-products .linkable, .page-strawberrybanana .linkable, .page-peachpassionfruit .linkable, #recipe-details-full .ingredients-and-directions .linkable { display: block; position: relative; color: #00833e; font-size: 35px; padding: 3px 0 6px; text-align: left; line-height: 1.5; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; } body.node-type-products .linkable:after, .page-strawberrybanana .linkable:after, .page-peachpassionfruit .linkable:after, #recipe-details-full .ingredients-and-directions .linkable:after { -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; content: ''; top: 24px; right: 16px; display: block; position: absolute; width: 23px; height: 14px; background: url("../img/gral/arrow-expand.png") no-repeat 0 0; background-position: 0 -16px; } body.node-type-products .linkable:hover:after, .page-strawberrybanana .linkable:hover:after, .page-peachpassionfruit .linkable:hover:after, #recipe-details-full .ingredients-and-directions .linkable:hover:after, body.node-type-products .active.linkable:after, .page-strawberrybanana .active.linkable:after, .page-peachpassionfruit .active.linkable:after, #recipe-details-full .ingredients-and-directions .active.linkable:after { background-position: 0 0; } body.node-type-products .active.linkable, .page-strawberrybanana .active.linkable, .page-peachpassionfruit .active.linkable, #recipe-details-full .ingredients-and-directions .active.linkable { border: 0; } body.node-type-products .expandible, #recipe-details-full .ingredients-and-directions .expandible { padding: 10px 10px 20px 0; } body.node-type-products .expandible ul, #recipe-details-full .ingredients-and-directions .expandible ul, body.node-type-products .expandible li, #recipe-details-full .ingredients-and-directions .expandible li, body.node-type-products .expandible p, #recipe-details-full .ingredients-and-directions .expandible p { text-align: left; } body.node-type-products .expandible a, #recipe-details-full .ingredients-and-directions .expandible a { text-decoration: none; font-weight: bold; color: #f4531c; } .carousel .owl-item > div, .videolist li .image-container { position: relative; } .carousel .owl-item > div:before, .videolist li .image-container:before, .carousel .owl-item > div:after, .videolist li .image-container:after { position: absolute; bottom: -48px; content: ''; overflow: hidden; width: 50%; height: 70px; z-index: -1; } .carousel .owl-item > div:before, .videolist li .image-container:before { left: 0; background-size: 200px; } .carousel .owl-item > div:after, .videolist li .image-container:after { right: 0; background-size: 200px; } .carousel .owl-prev, .carousel .owl-next { -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate3d(0px, -50%, 0); -ms-transform: translate3d(0px, -50%, 0); -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); top: 50%; width: 20px; height: 33px; background: transparent url("../img/gral/slider_arrows.png") no-repeat; text-indent: -9999px; } .carousel .owl-prev { position: absolute; left: -20px; background-position: left 0; } .carousel .owl-prev:hover, .carousel .owl-prev:focus { background-position: left bottom; } .carousel .owl-next { position: absolute; right: -20px; background-position: right 0; } .carousel .owl-next:hover, .carousel .owl-next:focus { background-position: right bottom; } #recipe-details-full .recipe-description-and-options #votes .votes, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes, .featured-recipe-collection .votes, .recipes > li .votes { margin: 0 auto; width: 100px; height: 20px; background: url("../img/gral/greenstar.png") repeat; } #recipe-details-full .recipe-description-and-options #votes .votes .voted, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted, .featured-recipe-collection .votes .voted, .recipes > li .votes .voted { display: block; height: 20px; width: 0; background: url("../img/gral/yellowstar.png") repeat; } #recipe-details-full .recipe-description-and-options #votes .votes .voted.v100, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted.v100, .featured-recipe-collection .votes .voted.v100, .recipes > li .votes .voted.v100 { width: 100px; } #recipe-details-full .recipe-description-and-options #votes .votes .voted.v80, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted.v80, .featured-recipe-collection .votes .voted.v80, .recipes > li .votes .voted.v80 { width: 80px; } #recipe-details-full .recipe-description-and-options #votes .votes .voted.v60, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted.v60, .featured-recipe-collection .votes .voted.v60, .recipes > li .votes .voted.v60 { width: 60px; } #recipe-details-full .recipe-description-and-options #votes .votes .voted.v40, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted.v40, .featured-recipe-collection .votes .voted.v40, .recipes > li .votes .voted.v40 { width: 40px; } #recipe-details-full .recipe-description-and-options #votes .votes .voted.v20, #recipe-details-full .share-wrapper .rating-wrapper #votes .votes .voted.v20, .featured-recipe-collection .votes .voted.v20, .recipes > li .votes .voted.v20 { width: 20px; } footer .footer-items .footer-item .footer-social .socials, footer .footer-items .footer-item.footer-links a, #getsocial .getsocial-header .social-disc .social-text a, .underlines { display: inline-block; } footer .footer-items .footer-item .footer-social .socials:after, footer .footer-items .footer-item.footer-links a:after, #getsocial .getsocial-header .social-disc .social-text a:after, .underlines:after { -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; display: block; position: relative; content: ''; width: 100%; transform: scaleX(0); background: #ffffff; margin: 2px auto -2px; height: 2px; } footer .footer-items .footer-item .footer-social .socials:hover:after, footer .footer-items .footer-item.footer-links a:hover:after, #getsocial .getsocial-header .social-disc .social-text a:hover:after, .underlines:hover:after, footer .footer-items .footer-item .footer-social .socials:focus:after, footer .footer-items .footer-item.footer-links a:focus:after, #getsocial .getsocial-header .social-disc .social-text a:focus:after, .underlines:focus:after { -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transform: scaleX(1); } #section-faqs .title, #product-categories .title, ._products-category .title { font-size: 92px; line-height: 1.2; } @media (max-width: 767px) { #section-faqs .title, #product-categories .title, ._products-category .title { font-size: 38px; } } @media (max-width: 767px) { body.node-type-products .linkable, .page-strawberrybanana .linkable, .page-peachpassionfruit .linkable, #recipe-details-full .ingredients-and-directions .linkable { font-size: 25px; } body.node-type-products .linkable:after, .page-strawberrybanana .linkable:after, .page-peachpassionfruit .linkable:after, #recipe-details-full .ingredients-and-directions .linkable:after { top: 15px; } .navigator .content-links:after { content: " "; display: table; clear: both; } body.node-type-products .expandible, #recipe-details-full .ingredients-and-directions .expandible { padding: 10px; } } /** LAYOUT **/ .container { position: relative; max-width: 1180px; margin: 0 auto; text-align: center; } @media screen and (max-width: 1200px) { .container { max-width: 100%; padding: 0 20px; } #slider .container { padding: 0; } } .page-one-ingredient .container { position: relative; max-width: 1194px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-one-ingredient .container.sep-5 { padding-left: 5px; padding-right: 5px; } .page-one-ingredient .container.sep-10 { padding-left: 10px; padding-right: 10px; } .page-one-ingredient .container.sep-15 { padding-left: 15px; padding-right: 15px; } .page-one-ingredient .container.sep-20 { padding-left: 20px; padding-right: 20px; } .page-one-ingredient .container.sep-25 { padding-left: 25px; padding-right: 25px; } .page-one-ingredient .container.sep-30 { padding-left: 30px; padding-right: 30px; } .page-one-ingredient .container.sep-35 { padding-left: 35px; padding-right: 35px; } .page-one-ingredient .container.sep-40 { padding-left: 40px; padding-right: 40px; } .page-one-ingredient .container.extended { max-width: 1360px; } .page-one-ingredient .container.fluid { max-width: unset; } .page-one-ingredient .container.full-height { height: 100%; } .page-one-ingredient .container.no-sep { padding-left: 0 !important; padding-right: 0 !important; } .page-one-ingredient .container .row { position: relative; font-size: 0; margin-left: -10px; margin-right: -10px; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-one-ingredient .container .row.sep-5 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-10 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-15 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-20 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-25 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-30 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-35 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.sep-40 { margin-left: -10px; margin-right: -10px; } .page-one-ingredient .container .row.hor-align-left { text-align: left; } .page-one-ingredient .container .row.hor-align-center { text-align: center; } .page-one-ingredient .container .row.hor-align-right { text-align: right; } .page-one-ingredient .container .row.full-height { height: 100%; } .page-one-ingredient .container .row.full-height > .col { height: 100%; } .page-one-ingredient .container .row.no-sep { margin-left: 0 !important; margin-right: 0 !important; } .page-one-ingredient .container .row.no-sep > .col { padding-left: 0 !important; padding-right: 0 !important; } .page-one-ingredient .container .row .col { display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; padding-right: 10px; position: relative; } .page-one-ingredient .container .row .col.sep-5 { padding-left: 5px; padding-right: 5px; } .page-one-ingredient .container .row .col.sep-10 { padding-left: 10px; padding-right: 10px; } .page-one-ingredient .container .row .col.sep-15 { padding-left: 15px; padding-right: 15px; } .page-one-ingredient .container .row .col.sep-20 { padding-left: 20px; padding-right: 20px; } .page-one-ingredient .container .row .col.sep-25 { padding-left: 25px; padding-right: 25px; } .page-one-ingredient .container .row .col.sep-30 { padding-left: 30px; padding-right: 30px; } .page-one-ingredient .container .row .col.sep-35 { padding-left: 35px; padding-right: 35px; } .page-one-ingredient .container .row .col.sep-40 { padding-left: 40px; padding-right: 40px; } .page-one-ingredient .container .row .col.col-1 { width: 1%; } .page-one-ingredient .container .row .col.col-2 { width: 2%; } .page-one-ingredient .container .row .col.col-3 { width: 3%; } .page-one-ingredient .container .row .col.col-4 { width: 4%; } .page-one-ingredient .container .row .col.col-5 { width: 5%; } .page-one-ingredient .container .row .col.col-6 { width: 6%; } .page-one-ingredient .container .row .col.col-7 { width: 7%; } .page-one-ingredient .container .row .col.col-8 { width: 8%; } .page-one-ingredient .container .row .col.col-9 { width: 9%; } .page-one-ingredient .container .row .col.col-10 { width: 10%; } .page-one-ingredient .container .row .col.col-11 { width: 11%; } .page-one-ingredient .container .row .col.col-12 { width: 12%; } .page-one-ingredient .container .row .col.col-13 { width: 13%; } .page-one-ingredient .container .row .col.col-14 { width: 14%; } .page-one-ingredient .container .row .col.col-15 { width: 15%; } .page-one-ingredient .container .row .col.col-16 { width: 16%; } .page-one-ingredient .container .row .col.col-17 { width: 17%; } .page-one-ingredient .container .row .col.col-18 { width: 18%; } .page-one-ingredient .container .row .col.col-19 { width: 19%; } .page-one-ingredient .container .row .col.col-20 { width: 20%; } .page-one-ingredient .container .row .col.col-21 { width: 21%; } .page-one-ingredient .container .row .col.col-22 { width: 22%; } .page-one-ingredient .container .row .col.col-23 { width: 23%; } .page-one-ingredient .container .row .col.col-24 { width: 24%; } .page-one-ingredient .container .row .col.col-25 { width: 25%; } .page-one-ingredient .container .row .col.col-26 { width: 26%; } .page-one-ingredient .container .row .col.col-27 { width: 27%; } .page-one-ingredient .container .row .col.col-28 { width: 28%; } .page-one-ingredient .container .row .col.col-29 { width: 29%; } .page-one-ingredient .container .row .col.col-30 { width: 30%; } .page-one-ingredient .container .row .col.col-31 { width: 31%; } .page-one-ingredient .container .row .col.col-32 { width: 32%; } .page-one-ingredient .container .row .col.col-33 { width: 33%; } .page-one-ingredient .container .row .col.col-34 { width: 34%; } .page-one-ingredient .container .row .col.col-35 { width: 35%; } .page-one-ingredient .container .row .col.col-36 { width: 36%; } .page-one-ingredient .container .row .col.col-37 { width: 37%; } .page-one-ingredient .container .row .col.col-38 { width: 38%; } .page-one-ingredient .container .row .col.col-39 { width: 39%; } .page-one-ingredient .container .row .col.col-40 { width: 40%; } .page-one-ingredient .container .row .col.col-41 { width: 41%; } .page-one-ingredient .container .row .col.col-42 { width: 42%; } .page-one-ingredient .container .row .col.col-43 { width: 43%; } .page-one-ingredient .container .row .col.col-44 { width: 44%; } .page-one-ingredient .container .row .col.col-45 { width: 45%; } .page-one-ingredient .container .row .col.col-46 { width: 46%; } .page-one-ingredient .container .row .col.col-47 { width: 47%; } .page-one-ingredient .container .row .col.col-48 { width: 48%; } .page-one-ingredient .container .row .col.col-49 { width: 49%; } .page-one-ingredient .container .row .col.col-50 { width: 50%; } .page-one-ingredient .container .row .col.col-51 { width: 51%; } .page-one-ingredient .container .row .col.col-52 { width: 52%; } .page-one-ingredient .container .row .col.col-53 { width: 53%; } .page-one-ingredient .container .row .col.col-54 { width: 54%; } .page-one-ingredient .container .row .col.col-55 { width: 55%; } .page-one-ingredient .container .row .col.col-56 { width: 56%; } .page-one-ingredient .container .row .col.col-57 { width: 57%; } .page-one-ingredient .container .row .col.col-58 { width: 58%; } .page-one-ingredient .container .row .col.col-59 { width: 59%; } .page-one-ingredient .container .row .col.col-60 { width: 60%; } .page-one-ingredient .container .row .col.col-61 { width: 61%; } .page-one-ingredient .container .row .col.col-62 { width: 62%; } .page-one-ingredient .container .row .col.col-63 { width: 63%; } .page-one-ingredient .container .row .col.col-64 { width: 64%; } .page-one-ingredient .container .row .col.col-65 { width: 65%; } .page-one-ingredient .container .row .col.col-66 { width: 66%; } .page-one-ingredient .container .row .col.col-67 { width: 67%; } .page-one-ingredient .container .row .col.col-68 { width: 68%; } .page-one-ingredient .container .row .col.col-69 { width: 69%; } .page-one-ingredient .container .row .col.col-70 { width: 70%; } .page-one-ingredient .container .row .col.col-71 { width: 71%; } .page-one-ingredient .container .row .col.col-72 { width: 72%; } .page-one-ingredient .container .row .col.col-73 { width: 73%; } .page-one-ingredient .container .row .col.col-74 { width: 74%; } .page-one-ingredient .container .row .col.col-75 { width: 75%; } .page-one-ingredient .container .row .col.col-76 { width: 76%; } .page-one-ingredient .container .row .col.col-77 { width: 77%; } .page-one-ingredient .container .row .col.col-78 { width: 78%; } .page-one-ingredient .container .row .col.col-79 { width: 79%; } .page-one-ingredient .container .row .col.col-80 { width: 80%; } .page-one-ingredient .container .row .col.col-81 { width: 81%; } .page-one-ingredient .container .row .col.col-82 { width: 82%; } .page-one-ingredient .container .row .col.col-83 { width: 83%; } .page-one-ingredient .container .row .col.col-84 { width: 84%; } .page-one-ingredient .container .row .col.col-85 { width: 85%; } .page-one-ingredient .container .row .col.col-86 { width: 86%; } .page-one-ingredient .container .row .col.col-87 { width: 87%; } .page-one-ingredient .container .row .col.col-88 { width: 88%; } .page-one-ingredient .container .row .col.col-89 { width: 89%; } .page-one-ingredient .container .row .col.col-90 { width: 90%; } .page-one-ingredient .container .row .col.col-91 { width: 91%; } .page-one-ingredient .container .row .col.col-92 { width: 92%; } .page-one-ingredient .container .row .col.col-93 { width: 93%; } .page-one-ingredient .container .row .col.col-94 { width: 94%; } .page-one-ingredient .container .row .col.col-95 { width: 95%; } .page-one-ingredient .container .row .col.col-96 { width: 96%; } .page-one-ingredient .container .row .col.col-97 { width: 97%; } .page-one-ingredient .container .row .col.col-98 { width: 98%; } .page-one-ingredient .container .row .col.col-99 { width: 99%; } .page-one-ingredient .container .row .col.col-100 { width: 100%; } .page-one-ingredient .container .row .col.col-third { width: 33.3333333333333%; } .page-one-ingredient .container .row .col.ver-align-top { vertical-align: top; } .page-one-ingredient .container .row .col.ver-align-middle { vertical-align: middle; } .page-one-ingredient .container .row .col.ver-align-bottom { vertical-align: bottom; } @media all and (max-width: 567px) { .page-one-ingredient .container .row.full-height { height: auto; } .page-one-ingredient .container .row.full-height .col { height: auto; } .page-one-ingredient .container .row .col:not(.no-responsive) { width: auto !important; display: block; } } footer { background: #00833e; padding: 40px 0 20px; position: relative; margin-top: 0; text-align: center; } footer .footer-items { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } footer .footer-items .footer-item { width: 33.3333%; } footer .footer-items .footer-item .footer-social { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; list-style-type: none; position: relative; } footer .footer-items .footer-item .footer-social .socials { display: block; text-indent: -9999px; width: 27px; height: 27px; position: relative; margin: 0 8px; background-size: 26px; background-repeat: no-repeat; color: #2C2A2B; } footer .footer-items .footer-item .footer-social .socials.facebook { background-image: url("../img/gral/logo-facebook.png"); } footer .footer-items .footer-item .footer-social .socials.youtube { background-image: url("../img/gral/logo-youtube.png"); width: 30px; height: 21px; background-size: 30px; } footer .footer-items .footer-item .footer-social .socials::after { top: 30px; } footer .footer-items .footer-item .copyright { color: #ffffff; font-size: 10px; line-height: 12px; } footer .footer-items .footer-item.footer-links { padding-left: 70px; } footer .footer-items .footer-item.footer-links ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; list-style: none; } footer .footer-items .footer-item.footer-links li { display: inline-block; width: 50%; text-align: left; margin: 6px 0; } footer .footer-items .footer-item.footer-links a { text-decoration: none; font-size: 15px; line-height: 18px; color: #ffffff; } footer .footer-items #footer-logo { display: block; width: 212px; height: 64px; background: url("../img/gral/logo-footer.png") no-repeat; background-size: contain; text-indent: -9999px; margin: 0; } .fr footer .footer-items .footer-item.footer-links { padding-left: 10px; } .fr footer .footer-items .footer-item.footer-links a { font-size: 13px; } @media (max-width: 1024px) { footer .container { padding: 0; } footer .footer-items { display: block; } footer .footer-items #footer-logo { width: 130px; height: 38px; margin: 0 auto; } footer .footer-items .footer-item { width: 100%; } footer .footer-items .footer-item .footer-social { margin: 20px 0; } footer .footer-items .footer-item .copyright { margin: 15px 0; } footer .footer-items .footer-item.footer-links { padding: 10px 20px; } footer .footer-items .footer-item.footer-links ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } footer .footer-items .footer-item.footer-links li { text-align: center; max-width: 200px; } .fr footer .footer-items .footer-item.footer-links { padding: 10px; } .fr footer .footer-items .footer-item.footer-links a { font-size: 12px; } /*.fr { footer .footer-items .footer-item.footer-links { padding: 10px 20px; ul { display: block; } li { max-width: 100%; text-align: center; width: 100%; } } }*/ } .grid.row50 > .container > * { width: 46%; float: left; } .grid.row50 > .container > *:first-child { margin-right: 4%; } .top-header-container { position: fixed; top: 0; width: 100%; z-index: 9; } .top-header-container .menu-options { -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1); background: #ffffff; padding-bottom: 15px; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } .top-header-container nav { padding-top: 15px; position: relative; } .top-header-container nav ul { margin-top: -16px; padding: 30px 110px 15px 0; float: right; list-style-type: none; } .top-header-container nav ul li { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; float: left; border: 2px solid transparent; padding: 8px 10px; margin: 0 5px; position: relative; } .top-header-container nav ul li > a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 15px; line-height: 1; text-decoration: none; color: #00833e; padding-bottom: 20px; position: relative; text-transform: uppercase; outline: 0; letter-spacing: 0.5px; } .top-header-container nav ul li > a::before { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.3s ease-in-out 0s; -moz-transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; border-radius: 5px; content: ''; position: absolute; width: 100%; height: 5px; bottom: 10px; left: 0; background-color: #ffc500; } .top-header-container nav ul li > a.active::before, .top-header-container nav ul li > a:hover::before, .top-header-container nav ul li > a:focus::before { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } .top-header-container nav ul li > a:focus { outline: none; } .top-header-container nav ul li.active { border: 2px solid #ffffff; } .top-header-container nav ul li:hover, .top-header-container nav ul li.active, .top-header-container nav ul li.hover, .top-header-container nav ul li:focus { background-color: #ffffff; } .top-header-container nav ul li:hover a, .top-header-container nav ul li.active a, .top-header-container nav ul li.hover a, .top-header-container nav ul li:focus a { color: #008752; } .top-header-container nav .header-items { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; position: absolute; right: 0; top: 31px; } .top-header-container .logo { float: left; display: block; } .top-header-container .logo h1 { text-indent: -9999px; z-index: 10; background-size: 100%; } .top-header-container .logo img { display: block; width: auto; height: 45px; margin-top: 10px; } .top-header-container #to-open-close-search-popover-container { cursor: pointer; margin-left: 30px; } .top-header-container #to-open-close-search-popover-container input { display: none; width: 20px; height: 20px; background: transparent; padding: 5px; } .top-header-container #to-open-close-search-popover-container #to-open-close-search-popover-button { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ''; display: block; width: 20px; height: 20px; background: transparent url("../img/gral/search-icon.png") no-repeat 0 0; position: relative; } .top-header-container #to-open-close-search-popover-container.expanded #to-open-close-search-popover-button { background-position: 0 -20px; } .collapsed-header { display: none; overflow: hidden; } .collapsed-header a { display: block; position: relative; background: #00833e; height: 30px; } .collapsed-header a:hover .menu-button, .collapsed-header a:focus .menu-button { opacity: 0.6; } .top-header-container > .top-header .consumer-alert-container { position: absolute; top: 11px; left: 50%; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); color: #444; text-transform: uppercase; } .top-header-container > .top-header .consumer-alert { position: relative; right: -15px; } .top-header-container > .top-header .consumer-alert > span { position: relative; } .top-header-container > .top-header .consumer-alert var { border-radius: 50%; color: #444; font-size: 11px; font-style: normal; font-weight: bold; height: 17px; line-height: 16px; padding: 0 5px 0 5px; position: absolute; right: -19px; top: -4px; width: 17px; background-color: #f45420; } .top-header-container > .top-header .consumer-alert a { text-decoration: none; color: #444; position: relative; display: block; } .top-header-container > .top-header .consumer-alert.active { right: 0; } .top-header-container > .top-header .consumer-alert.active var { opacity: 1; } @media (max-width: 1050px) { .top-header-container > .top-header .consumer-alert-container { display: none; } } #mobile-menu { display: none; } .search-mobile, .close-for-mobile { display: none; } @media (max-width: 1050px) { .top-header-container { z-index: 11; } .top-header-container .top-header { display: none; } .top-header-container .menu-options { display: none; } .mobileHeaderOverflow .top-header-container { overflow: hidden; z-index: 9; } .top-header-container .logo { width: 65px; height: 65px; top: 0; margin: 0 auto; position: relative; float: none; background-size: contain; } .search-mobile { width: 2.75em; height: 2.75em; z-index: 10; top: 45px; left: 8px; position: fixed; background: transparent url("../img/gral/sprite.png") no-repeat local -154px -184px; background-size: 243px auto; } #mobile-menu { display: block; } #headers { position: fixed; top: 0; left: 0; background: #ffffff; z-index: 9; width: 100%; height: 60px; } #headers .logo { display: block; width: 111px; height: 50px; top: 15px; background: url("../img/gral/logo.png") no-repeat top center; background-size: 100%; text-indent: -9999px; position: relative; margin: 0 auto; z-index: 10; } .menu-wrap { -moz-transform: translate3d(-110%, 0, 0); -o-transform: translate3d(-110%, 0, 0); -ms-transform: translate3d(-110%, 0, 0); -webkit-transform: translate3d(-110%, 0, 0); transform: translate3d(-110%, 0, 0); -webkit-transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; position: fixed; z-index: 14; width: 100%; height: 100%; top: 0; font-size: 20px; } .menu-wrap .menu { background: #00833e; height: 100%; padding: 30px; position: relative; z-index: 14; width: 100%; display: block; overflow-y: scroll; } .menu-wrap .logo-menu { display: block; margin-bottom: 25px; } .show-menu #mobile-menu { display: block; } .show-menu .menu-wrap { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; z-index: 14; } #mobile-menu .mobile-menu-options { padding-top: 8px; } #mobile-menu .mobile-menu-options ul { list-style: none; } #mobile-menu .mobile-menu-options li { display: block; margin: 7px 0; } #mobile-menu .mobile-menu-options .mobile-menu-option { display: block; width: 100%; padding: 10px 5px; text-decoration: none; color: #ffffff; -webkit-font-smoothing: antialiased; text-align: left; font-size: 26px; text-transform: uppercase; outline: 0; letter-spacing: 0.5px; } #mobile-menu .menu-footer-top { display: flex; justify-content: space-between; border-bottom: solid 1px #ffffff; margin: 40px auto 20px; padding-bottom: 20px; } #mobile-menu .menu-footer-top > * { width: 50%; } #mobile-menu .menu-footer-top .to-switch-language { text-transform: uppercase; } #mobile-menu .mobile-menu-footer-links { list-style: none; text-align: left; } #mobile-menu .mobile-menu-footer-links li { display: inline-block; margin: 0 30px 0 0; } #mobile-menu .mobile-menu-footer-links a { color: #ffffff; display: block; padding: 7px 7px 7px 0; text-decoration: none; font-size: 17px; } #mobile-menu .mobile-social { padding: 12px 0 0; } #mobile-menu .mobile-social .socials { text-indent: -9999px; border: none; display: inline-block; background-size: 100%; background-repeat: no-repeat; background-position: 0 0; margin: 0 5px; } #mobile-menu .mobile-social .socials.facebook { width: 26px; height: 26px; background-image: url("../img/gral/logo-facebook.png"); } #mobile-menu .mobile-social .socials.youtube { width: 30px; height: 21px; background-image: url("../img/gral/logo-youtube.png"); position: relative; top: 3px; } .close-button { width: 16px; height: 16px; position: absolute; right: 20px; overflow: hidden; text-indent: 16px; border: none; z-index: 15; color: transparent; top: 30px; padding: 20px; cursor: pointer; background: transparent; } .close-button::before, .close-button::after { content: ''; position: absolute; width: 3px; height: 55%; top: 18%; left: 50%; background: #ffffff; } .close-button::before { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-button::after { -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .search-mobile { display: block; left: auto; right: 10px; top: 49px; } .hideMobileTopBar #headers { top: 0 !important; } .hideMobileTopBar #slider-brands { height: 0 !important; } .hideMobileTopBar #open-button { top: -15px !important; } .hideMobileTopBar .search-mobile { top: 15px !important; } #headers, #open-button, .search-mobile { -webkit-transition: top 500ms ease-in-out; -moz-transition: top 500ms ease-in-out; -o-transition: top 500ms ease-in-out; transition: top 500ms ease-in-out; } #slider-brands { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } } #slider-brands { background: #f6f6f6; padding: 0; } #slider-brands p { float: left; margin-top: 23px; font-size: 15px; display: inline-block; } #slider-brands a { text-decoration: none; color: inherit; } #slider-brands .brand-list { float: right; display: inline-block; } #slider-brands .brand-list li { margin: 0 10px; display: inline-block; } #slider-brands .brand-list { width: 73%; margin-right: 20px; margin-left: 20px; } #slider-brands .brand-list .owl-controls { display: block; } #slider-brands .brand-list .owl-pagination { display: none; } #slider-brands .brand-list .owl-prev, #slider-brands .brand-list .owl-next { text-align: left; position: absolute; display: block; background: url("../img/gral/slider-arrows.png") no-repeat 0 0; width: 18px; text-indent: -9999px; height: 27px; top: 16px; } #slider-brands .brand-list .owl-prev { left: -20px; } #slider-brands .brand-list .owl-next { background-position: -19px 0; right: -20px; } @media (min-width: 981px) and (max-width: 1024px) { #slider-brands .brand-list { width: 79%; } } @media (max-width: 980px) { #slider-brands .brand-list { width: 70%; margin-right: 4%; margin-left: 20px; } } @media (max-width: 767px) { #slider-brands { height: 42px; overflow: hidden; } #slider-brands > .container p { display: none; } #slider-brands .brand-list { width: 86%; margin: 0 auto; float: none; } #slider-brands .brand-list img { max-height: 40px; } #slider-brands .owl-buttons .owl-prev, #slider-brands .owl-buttons .owl-next { top: 6px; } } #submenu { -webkit-box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4); -moz-box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4); box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.4); position: fixed; z-index: 8; width: 100%; display: none; background: #ffffff; top: -105px; padding: 10px 0 0 0; } #submenu .dragscroll { height: 125px; } #submenu .dragscroll ul { cursor: w-resize; } #submenu > div { overflow: hidden; margin: 0px !important; width: 100% !important; text-align: center; } #submenu ul { display: inline-block; list-style-type: none; margin: 15px auto; width: 100%; max-width: 1180px; padding-left: 2%; text-align: center; } #submenu ul li { width: 14%; text-align: left; display: inline-block; max-height: none; } #submenu ul li > .left-side { text-align: center; } #submenu ul li > .left-side a { display: inline-block; position: relative; text-decoration: none; } #submenu ul li > .left-side a:hover img { -webkit-filter: drop-shadow(0px 0px 7px #999); filter: drop-shadow(0px 0px 7px #999); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; } #submenu ul li > .left-side a.link { padding: 8px 15px; background: #00833e; border-radius: 25px; color: #ffffff; font-size: 80%; } #submenu ul li > .left-side a.link:hover { background: #2C2A2B; text-decoration: none; } #submenu ul li > .left-side a.link:after { display: none; } #submenu ul li > .left-side a img { max-height: 120px; } #submenu ul li > .left-side p { width: 100%; line-height: 1em; font-size: 17px; color: #00833e; padding: 0; text-align: center; margin: 10px 0; height: 34px; } #submenu ul li > .right-side { padding-top: 4px; padding-left: 10px; margin-right: 25px; float: left; } #submenu ul li > .right-side p { max-width: 125px; line-height: 1em; font-size: 20px; font-weight: bold; color: #00833e; padding: 0; text-align: left; height: 50px; } #submenu ul li > .right-side a { color: #2C2A2B; font-size: 13px; text-decoration: none; } @media (max-width: 980px) { #submenu { display: none; } } @media (max-width: 767px) { #submenu { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; display: none; z-index: 15; top: 0 !important; width: 350px; left: -100%; height: 100%; padding-left: 40px; overflow-y: scroll; } #submenu .dragscroll { height: 100%; } #submenu ul { width: 100%; } #submenu ul > li { float: left; width: 48%; position: relative; margin-right: 0px; padding-bottom: 15px; } #submenu ul > li .left-side { width: 100%; display: flex; align-items: center; } #submenu ul > li .left-side img { max-width: 90%; } #submenu ul > li .left-side a.image { width: 40%; float: left; } #submenu ul > li .left-side a.image img { max-height: 80px; } #submenu ul > li .left-side p { width: 59%; float: right; text-align: left; height: auto; } #submenu ul > li .left-side a.link { display: none; } #submenu ul > li .right-side { width: 60%; margin-right: 0; } #submenu ul > li .right-side a { display: none; } #__closeSubmenu { -webkit-box-shadow: 3px 0 15px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 0 15px 0 rgba(0, 0, 0, 0.2); box-shadow: 3px 0 15px 0 rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; width: 34px; height: 425px; background: transparent url("../img/gral/arrow-left.png") no-repeat center 20px; background-size: 40%; } } @media (max-width: 479px) { #__closeSubmenu { height: 100%; } } @media screen and (max-width: 767px) { footer { max-width: 100%; overflow: hidden; } } .top-header-container > .top-header { max-width: 100%; box-sizing: border-box; padding: 2px 0 8px 0; font-size: 13px; width: 100%; background: #ffffff; } .top-header-container > .top-header .container div { float: right; } .top-header-container > .top-header .container div.align-left { float: left; } .top-header-container > .top-header .container div.align-right { padding-left: 20px; float: right; } .to-location-container { z-index: 11; position: relative; } .to-location-container > a { display: block; position: relative; top: 3px; cursor: pointer; padding-right: 4px; border-radius: 5px; color: #ffffff; text-decoration: none; } .to-location-container > a:hover, .to-location-container > a:focus { background: #F7F7F7; color: #008752; } .to-location-container > a:hover i, .to-location-container > a:focus i { background-position: -45px -33px; } .to-location-container > a .selected { position: relative; top: -3px; } .to-location-container > ul { display: none; position: absolute; list-style: none; text-align: center; top: 30px; left: -40px; } .to-location-container > ul li a, .to-location-container > ul li .info { background: #E1DECE; padding: 3px; min-width: 150px; display: block; text-decoration: none; color: #2C2A2B; } .to-location-container > ul li a:hover, .to-location-container > ul li a:focus { background: #eaf7fd; } .to-location-container > ul li .info { font-size: 10px; background: #eaf7fd; } #language { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #00833e; border: 2px #00833e solid; border-radius: 50%; display: block; font-weight: bold; font-size: 15px; letter-spacing: 1px; text-decoration: none; color: #ffffff; padding: 7px 4px; position: relative; text-transform: uppercase; width: 32px; height: 32px; } #language:hover, #language:focus { background-color: #ffffff; color: #00833e; } .safari #language { padding: 7px 2px; } .top-header-container .align-right > a { text-decoration: none; } .top-header-container .align-right > a:hover .customized, .top-header-container .align-right > a:focus .customized { background-position: 0 -22px; } .to-newsletter { color: #ffffff; text-decoration: none; } .to-newsletter:hover, .to-newsletter:focus { color: #00833e; } .to-newsletter:hover .newsletter, .to-newsletter:focus .newsletter { background-position: -78px -34px; } @media (max-width: 767px) { .top-header-container .align-right { display: none; } .to-location-container { position: static; } .to-location-container > ul { left: auto; right: 0; } .to-location-container #to-location { float: left; font-size: 9px; padding-right: 7px; padding-bottom: 2px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; } .to-location-container #to-location .selected { top: -5px; } } section { background: #ffffff; padding: 50px 0 20px; border-bottom: 1px solid #ffffff; } .title { color: #00833e; position: relative; margin-bottom: 30px; text-transform: uppercase; } .title:after { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); content: ' '; display: block; position: absolute; bottom: -10px; left: 51%; height: 12px; width: 119px; } .title + p { color: #2C2A2B; display: inline-block; width: 90%; max-width: 830px; text-align: center; margin: 22px auto; line-height: 1.2; } section.section-body { padding: 45px 0 70px; } section.section-body .title { margin-bottom: 20px; } section.section-body .title.title-page { margin-bottom: 40px; } section.section-body._products-category div.en_desc p, section.section-body._products-category div.fr_desc p { font-size: 16px; line-height: 26px; padding: 0px 16%; } section.section-alternative { padding-bottom: 0; background: #ffffff; } section.section-alternative .title { color: #00833e; } section.section-alternative .title + p { color: #2C2A2B; } section.section-alternative .title:after { background-position: 0 -12px; } section.section-body.no-padding-top { padding-top: 0; } #main-content { margin-top: 95px; position: relative; overflow-x: hidden; display: block; } #main-content > section:last-child { border: none; } body.front section#related-videos { padding-top: 95px; } body.front section#our-recipes { padding-top: 80px; } body.front section#getsocial { padding: 80px 0 0; } @media (max-width: 767px) { body.front section#getsocial { padding-top: 20px; } } @media (max-width: 1050px) { .title { line-height: 1em; padding-left: 20px; padding-right: 20px; } #main-content { margin-top: 60px; top: 0; overflow: hidden; } section.section-body { padding: 30px 0 40px; } section.section-body .title { margin-bottom: 50px; } section.section-body._products-category div.en_desc p, section.section-body._products-category div.fr_desc p { padding: 0 5% 5%; } } /** PAGES **/ body.node-type-article .general-header { background: url(../img/header/article-header.jpg); } body.node-type-article #article { padding: 35px 0; } body.node-type-article #article .title, body.node-type-article #article .body { text-align: center; } body.node-type-article #article p { margin: 20px 0; } body.page-contact-us .contact-us .content { margin: 40px 0; padding: 30px 0px; text-align: center; background: url("../img/gral/contact-separator.jpg") center center no-repeat; } body.page-contact-us .contact-us .content b { font-size: 25px; margin-bottom: 5px; display: inline-block; } body.page-contact-us .contact-us .content > div { display: inline-block; width: auto; text-align: left; vertical-align: top; position: relative; padding-left: 70px; max-width: 280px; left: 30px; } body.page-contact-us .contact-us .content > div p { color: #2C2A2B; line-height: 1.1em; } body.page-contact-us .contact-us .content > div a { color: #00833e; text-decoration: none; } body.page-contact-us .contact-us .content > div a:hover, body.page-contact-us .contact-us .content > div a:focus { text-decoration: underline; } body.page-contact-us .contact-us .content > div:before { width: 50px; height: 50px; content: ''; display: inline-block; position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: 100%; } body.page-contact-us .contact-us .content > div:first-child { padding-right: 50px; margin-right: 50px; } body.page-contact-us .contact-us .content > div#call-us:before { background-image: url("../img/gral/icon-phone.png"); } body.page-contact-us .contact-us .content > div#email-us:before { background-image: url("../img/gral/icon-email.png"); } body.page-contact-us .contact-us .content + div { padding: 30px 0; background: #F1F1F1; margin: 30px 0; max-width: 100%; } body.page-contact-us .socials { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; text-indent: -9999px; display: inline-block; margin: 0 5px; font-size: 0; background: none; background-size: 57px; border: none; width: 57px; height: 57px; } body.page-contact-us .socials:hover, body.page-contact-us .socials:focus, body.page-contact-us .socials.hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } body.page-contact-us .socials.twitter { background-position: -170px -61px; } body.page-contact-us .socials.instagram { background-position: -244px -61px; } body.page-contact-us .socials.youtube { background-position: -318px -61px; } #connect-with-us h2 { font-size: 22px; padding-bottom: 10px; color: #2C2A2B; text-transform: uppercase; } .contact-us { margin-top: 20px; } .contact-us h2 + p { color: #00833e; } .contact-us h2 + p + p { color: #00833e; } .contact-us b { color: #008752; } @media (max-width: 767px) { body.page-contact-us .contact-us .content > div { width: 90%; margin-left: auto; margin-right: auto; } body.page-contact-us .contact-us .content > div:first-child { left: 10px; margin-right: auto; padding-bottom: 20px; } body.page-contact-us .contact-us .content + div { padding-bottom: 30px; } } @media (max-width: 479px) { body.page-contact-us .contact-us .title { padding: 0px 0px 20px 0px; } body.page-contact-us .contact-us .content { background: none; padding-top: 0px; } body.page-contact-us .contact-us .content > div { left: 0px; } body.page-contact-us .contact-us .content > div:first-child + div { margin-top: 20px; margin-left: 0px; } body.page-contact-us .contact-us .content > div:first-child { left: 0px; width: 75%; padding-right: 0px; border-bottom: solid 1px #999; } } /** ERROR PAGE **/ body.page-error #header-top { background: transparent !important; height: 122px; margin-top: 0 !important; } body.page-error #main-content { height: 100%; background: url("../img/header/404.jpg") no-repeat 0 50%; } body.page-error #error-404 { margin-top: 30px; } body.page-error #error-404 .links { padding: 25px 0 59px 0; } @media (max-width: 980px) { .page-error #error-404 { margin-top: 5px; padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 767px) { .page-error #error-404 { padding-top: 30px; padding-bottom: 30px; } } body.page-getsocial #getsocial { padding-bottom: 30px; } body.page-getsocial #getsocial { padding-bottom: 0; } .goodnessofjuice { padding: 0; } .goodnessofjuice a { text-decoration: none; color: inherit; } .goodnessofjuice img { max-width: 100%; } .goodnessofjuice * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; outline: 0; -webkit-text-size-adjust: 100%; } .goodnessofjuice .goodnessofjuice-item { padding-top: 12vw; padding-bottom: 20px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-first { background-image: url("../img/gral/hero-orange.jpg?1"); } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-second { background-image: url("../img/gral/goodnessofjuice2.jpg?1"); height: 750px; } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-third { background-image: url("../img/gral/goodnessofjuice3_v3.png?1"); height: 1010px; } .goodnessofjuice .grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .goodnessofjuice .grid > div { width: 60%; } .goodnessofjuice .grid-vertical { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; padding-top: 250px; } .goodnessofjuice .grid-vertical > div { width: 100%; padding-left: 10px; padding-right: 10px; text-align: center; } .goodnessofjuice .goodnessofjuice-first { background-color: #fab301; } .goodnessofjuice .goodnessofjuice-first .grid > div:first-child { /*padding-top: 12vw;*/ text-align: left; } .goodnessofjuice .goodnessofjuice-first .grid > div:last-child { height: 100%; } .goodnessofjuice .goodnessofjuice-first h2 { color: #ffffff; line-height: 1; margin-bottom: 20px; font-size: 80px; text-transform: uppercase; } .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 140px; } .goodnessofjuice .goodnessofjuice-first .description { color: #ffffff; font-size: 26px; line-height: 1.1; max-width: 585px; } .goodnessofjuice .goodnessofjuice-first .description.center { text-align: center; margin: 6vw auto 0; } .goodnessofjuice .goodnessofjuice-first .arrow-bottom { background-image: url("../img/gral/arrow-slider.png"); background-repeat: no-repeat; background-size: auto; background-position: center center; cursor: pointer; width: 43px; height: 25px; margin: 30px auto 0; } .goodnessofjuice .goodnessofjuice-first .arrow-bottom:hover { -webkit-animation-delay: 0; -webkit-animation-duration: 1s; -webkit-animation-name: translatey; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; -moz-animation-delay: 0; -moz-animation-duration: 1s; -moz-animation-name: translatey; -moz-animation-fill-mode: forwards; -moz-animation-iteration-count: infinite; -o-animation-delay: 0; -o-animation-duration: 1s; -o-animation-name: translatey; -o-animation-fill-mode: forwards; -o-animation-iteration-count: infinite; animation-delay: 0; animation-duration: 1s; animation-name: translatey; animation-fill-mode: forwards; animation-iteration-count: infinite; } .goodnessofjuice .goodnessofjuice-second { background-color: #03823d; } .goodnessofjuice .goodnessofjuice-second .grid { margin-right: -25px; } .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { height: 100%; width: 48%; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { padding-top: 86px; padding-bottom: 40px; width: 52%; } .goodnessofjuice .goodnessofjuice-second h2 { font-size: 68px; line-height: 0.9; color: #ffffff; text-align: center; margin-bottom: 25px; text-transform: uppercase; } .goodnessofjuice .goodnessofjuice-second h2 span { font-size: 107px; } .goodnessofjuice .goodnessofjuice-second p { font-size: 23px; line-height: 1.3; color: #ffffff; } .goodnessofjuice .goodnessofjuice-second .mini-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .goodnessofjuice .goodnessofjuice-second .mini-grid > div { padding-left: 10px; padding-right: 10px; } .goodnessofjuice .goodnessofjuice-second .mini-grid p { font-size: 18px; } .goodnessofjuice .goodnessofjuice-second .m-1 { margin-bottom: 30px; } .goodnessofjuice .goodnessofjuice-second .m-2 { margin-bottom: 25px; } .goodnessofjuice .goodnessofjuice-second .m-3 { margin-bottom: 5px; } .goodnessofjuice .goodnessofjuice-second .m-4 { margin-bottom: 30px; } .goodnessofjuice .goodnessofjuice-third { background-color: #fdfdff; } .goodnessofjuice .goodnessofjuice-third h2 { font-size: 93px; line-height: .95; color: #03823d; text-align: center; text-transform: uppercase; text-shadow: 0 0 30px #ffffff; } .goodnessofjuice .goodnessofjuice-third p { font-size: 23px; line-height: 1.3; color: #ffffff; margin: 20px 0; } .goodnessofjuice .goodnessofjuice-nutrition { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .goodnessofjuice .goodnessofjuice-nutrition .item { margin: 66px 102px 50px; display: block; cursor: default; } .goodnessofjuice .goodnessofjuice-nutrition .item:hover .circle, .goodnessofjuice .goodnessofjuice-nutrition .item:focus .circle { background: #03823d; } .goodnessofjuice .goodnessofjuice-nutrition .item:hover .circle::after, .goodnessofjuice .goodnessofjuice-nutrition .item:focus .circle::after { background: rgba(255, 255, 255, 0.4); } .goodnessofjuice .goodnessofjuice-nutrition .item:hover .info, .goodnessofjuice .goodnessofjuice-nutrition .item:focus .info { display: block; opacity: 1; } .goodnessofjuice .goodnessofjuice-nutrition .circle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 87px; height: 87px; background: #f5ab1d; overflow: hidden; margin: 0 auto; } .goodnessofjuice .goodnessofjuice-nutrition .circle::after { -moz-transform: translate(-20px, -20px); -o-transform: translate(-20px, -20px); -ms-transform: translate(-20px, -20px); -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%; background: #fac40e; content: ''; display: block; position: absolute; } .goodnessofjuice .goodnessofjuice-nutrition .circle span { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 58px; line-height: 1; color: #ffffff; text-align: center; position: absolute; left: 50%; top: 50%; z-index: 10; } .goodnessofjuice .goodnessofjuice-nutrition .circle span sub { font-size: 28px; top: 0.2em; } .goodnessofjuice .goodnessofjuice-nutrition .legend { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); font-size: 22px; line-height: 28px; color: #03823d; text-align: center; text-transform: uppercase; margin-top: 16px; position: absolute; left: 50%; white-space: nowrap; letter-spacing: 1.2px; } .goodnessofjuice .goodnessofjuice-nutrition .info { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; transition: opacity 1s ease; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #03823d; position: absolute; top: calc(100% + 20px + 28px + 20px); left: 50%; z-index: 20; width: 250px; padding: 15px; display: none; opacity: 0; } .goodnessofjuice .goodnessofjuice-nutrition .info::after { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); background: url("../img/gral/top-info-nutrition.png") no-repeat center center; content: ''; position: absolute; left: 50%; top: -14px; width: 32px; height: 32px; z-index: 1; } .goodnessofjuice .goodnessofjuice-nutrition .info .info-title { font-size: 23px; line-height: 29px; color: #ffffff; text-align: center; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1.2px; } .goodnessofjuice .goodnessofjuice-nutrition .info .info-content { font-size: 13px; line-height: 21px; color: #ffffff; text-align: center; margin-top: 10px; } .goodnessofjuice .goodnessofjuice-nutrition .info hr { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 40px; height: 5px; margin: 0 auto; background: #ffc501; } .fr .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 164px; } .fr .goodnessofjuice .goodnessofjuice-second h2 { font-size: 28px; } .fr .goodnessofjuice .goodnessofjuice-second h2 span { font-size: 74px; } @media (min-width: 768px) { .fr .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-third { height: 1020px; } } @media (min-width: 1600px) { .goodnessofjuice .goodnessofjuice-first { background-size: auto; background-position: 70% center; } } @media (max-width: 1240px) { .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { width: 40%; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { width: 60%; } } @media (max-width: 1180px) { .goodnessofjuice .goodnessofjuice-first h2 { font-size: 70px; } .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 123px; } .goodnessofjuice .goodnessofjuice-first .description { font-size: 24px; } .fr .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 144px; } } @media (max-width: 1130px) { .goodnessofjuice .goodnessofjuice-nutrition .item { margin: 66px 91px 50px; } } @media (max-width: 1030px) { .goodnessofjuice .goodnessofjuice-first h2 { font-size: 52px; } .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 91px; } .goodnessofjuice .goodnessofjuice-first .description { font-size: 20px; } .goodnessofjuice .goodnessofjuice-first .description br { display: none; } .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { width: 30%; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { width: 70%; } .goodnessofjuice .goodnessofjuice-nutrition .item { margin: 66px 64px 50px; } .fr .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 108px; } .fr .goodnessofjuice .goodnessofjuice-first .description { font-size: 20px; max-width: 500px; } .fr .goodnessofjuice .goodnessofjuice-first .description br { display: none; } } @media (max-width: 890px) { .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { width: 20%; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { width: 80%; } .goodnessofjuice .goodnessofjuice-nutrition .item { margin: 66px 46px 50px; } } @media (max-width: 800px) { .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { width: 15%; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { width: 85%; } } @media (max-width: 767px) { .goodnessofjuice .goodnessofjuice-item { padding-top: 18vw; height: auto; } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-first { background-image: none; } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-second { background-image: url("../img/gral/goodnessofjuice2-mobile.jpg?1"); } .goodnessofjuice .goodnessofjuice-item.goodnessofjuice-third { background-image: url("../img/gral/goodnessofjuice3-mobile.jpg?1"); background-position: center top; background-size: 100% auto; height: auto; } .goodnessofjuice .container { height: auto; } .goodnessofjuice .grid { display: block; height: auto; } .goodnessofjuice .grid > div { width: 100%; } .goodnessofjuice .grid-vertical { display: block; height: auto; padding-top: 34vw; padding-bottom: 40px; } .goodnessofjuice .goodnessofjuice-first .grid > div:first-child { width: 100%; } .goodnessofjuice .goodnessofjuice-first .grid > div:last-child { height: auto; width: 100%; } .goodnessofjuice .goodnessofjuice-first h2 { font-size: 50px; margin-bottom: 30px; } .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 77px; } .goodnessofjuice .goodnessofjuice-first .description { font-size: 15px; line-height: 26px; max-width: 100%; } .goodnessofjuice .goodnessofjuice-first .description br { display: block; } .goodnessofjuice .goodnessofjuice-second .grid { margin-right: 0; } .goodnessofjuice .goodnessofjuice-second .grid > div:first-child { display: none; } .goodnessofjuice .goodnessofjuice-second .grid > div:last-child { width: 100%; } .goodnessofjuice .goodnessofjuice-second h2 { font-size: 30px; } .goodnessofjuice .goodnessofjuice-second h2 span { font-size: 56px; } .goodnessofjuice .goodnessofjuice-second p { font-size: 16px; line-height: 21px; } .goodnessofjuice .goodnessofjuice-second .mini-grid { display: block; } .goodnessofjuice .goodnessofjuice-second .mini-grid p { font-size: 14px; line-height: 19px; } .goodnessofjuice .goodnessofjuice-second .mini-grid > div { padding-left: 10px; padding-right: 10px; } .goodnessofjuice .goodnessofjuice-third h2 { font-size: 60px; line-height: 1; } .goodnessofjuice .goodnessofjuice-third p { font-size: 23px; line-height: 29px; } .goodnessofjuice .goodnessofjuice-nutrition { width: 100% !important; } .goodnessofjuice .goodnessofjuice-nutrition .item { margin: 40px 0 25px; padding: 0 10px; width: calc(100% / 3); } .goodnessofjuice .goodnessofjuice-nutrition .item:nth-of-type(3n - 2) .info::after { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 20px; } .goodnessofjuice .goodnessofjuice-nutrition .item:nth-of-type(3n - 1) .info { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); margin-left: 50%; } .goodnessofjuice .goodnessofjuice-nutrition .item:nth-of-type(3n) .info { -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); margin-left: 100%; } .goodnessofjuice .goodnessofjuice-nutrition .item:nth-of-type(3n) .info::after { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: auto; right: 20px; } .goodnessofjuice .goodnessofjuice-nutrition .circle { width: 60px; height: 60px; } .goodnessofjuice .goodnessofjuice-nutrition .circle::after { -moz-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -webkit-transform: translate(-10px, -10px); transform: translate(-10px, -10px); } .goodnessofjuice .goodnessofjuice-nutrition .circle span { font-size: 38px; } .goodnessofjuice .goodnessofjuice-nutrition .circle span sub { font-size: 18px; top: 0.2em; display: inline !important; } .goodnessofjuice .goodnessofjuice-nutrition .legend { font-size: 16px; line-height: 22px; } .goodnessofjuice .goodnessofjuice-nutrition .info { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: auto; left: auto; margin-top: 60px; position: relative; } } @media (max-width: 420px) { .goodnessofjuice .goodnessofjuice-first p { font-size: 14px; line-height: 24px; } .goodnessofjuice .goodnessofjuice-second p { font-size: 14px; line-height: 24px; } } @media (max-width: 375px) { .goodnessofjuice .goodnessofjuice-first p { font-size: 13px; line-height: 23px; } .goodnessofjuice .goodnessofjuice-second p { font-size: 13px; line-height: 23px; } } @media (max-width: 767px) { .goodnessofjuice .goodnessofjuice-first .grid > div:first-child { text-align: center; } .goodnessofjuice .goodnessofjuice-first .grid > div:last-child { margin-top: 10px; } .goodnessofjuice .goodnessofjuice-first h2 { font-size: 39px; } .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 70px; } .goodnessofjuice .goodnessofjuice-first .description { font-size: 16px; line-height: 30px; max-width: 100%; } .fr .goodnessofjuice .goodnessofjuice-first h2 { font-size: 40px; } .fr .goodnessofjuice .goodnessofjuice-first h2 span { font-size: 83px; } .fr .goodnessofjuice .goodnessofjuice-first .description { font-size: 16px; line-height: 30px; max-width: 100%; } .fr .goodnessofjuice .goodnessofjuice-second h2 { font-size: 20px; line-height: 1; } .fr .goodnessofjuice .goodnessofjuice-second h2 span { font-size: 40px; } } @media (max-width: 370px) { .goodnessofjuice .goodnessofjuice-first .description { font-size: 14px; line-height: 26px; } } .page-about-us { background-image: linear-gradient(141deg, #ffc205 25%, #f8a918 25%, #f8a918 50%, #ffc205 50%, #ffc205 75%, #f8a918 75%, #f8a918 100%); background-size: 603.83px 488.97px; } section.aboutus { background: none; padding-top: 55px; } section.aboutus .title { color: #ffffff; font-size: 115px; letter-spacing: 3.45px; line-height: 143.99px; text-transform: uppercase; margin-bottom: 8px; } section.aboutus .subtitle { width: 955px; max-width: 90%; margin: 0 auto; height: 77px; color: #000 !important; font-size: 30px; line-height: 1.3; letter-spacing: -.02px; } section.aboutus .about_us_wrapper { margin-top: 55px; position: relative; overflow: hidden; } section.aboutus .about_us_wrapper::after { content: ''; display: block; width: 5px; height: 100%; background: #ffffff; left: 50%; top: 180px; position: absolute; } section.aboutus .about_us_wrapper .element { height: 450px; } section.aboutus .about_us_wrapper .element h2 { color: #ffffff; font-size: 114px; font-weight: 400; letter-spacing: 1.14px; position: relative; margin-bottom: 44px; z-index: 1; } section.aboutus .about_us_wrapper .element h2 sup { position: absolute; top: -35px; font-size: 50px; text-transform: uppercase; } section.aboutus .about_us_wrapper .element h2::before { content: ' '; width: 192px; height: 5px; background-color: #ffffff; position: absolute; top: 77px; border-radius: 5px; } section.aboutus .about_us_wrapper .element h2::after { content: ' '; width: 15px; height: 15px; border: 5px solid #ffffff; background-color: #00833e; position: absolute; top: 67px; border-radius: 50%; } section.aboutus .about_us_wrapper .element h3 { color: #000; font-weight: 400; letter-spacing: 0.19px; font-size: 30px; margin-bottom: 3px; } section.aboutus .about_us_wrapper .element p { color: #000; font-size: 19px; font-weight: 400; letter-spacing: 0.19px; line-height: 29px; } section.aboutus .about_us_wrapper .element .img-container { position: relative; height: 450px; max-width: 100%; } section.aboutus .about_us_wrapper .element .img-shadow-container { width: 412px; height: 412px; position: relative; display: inline-block; } section.aboutus .about_us_wrapper .element .img-shadow-container::before { content: ''; position: absolute; top: 10px; left: 10px; background: #ffc205; width: 100%; height: 100%; border-radius: 50%; display: block; z-index: 0; } section.aboutus .about_us_wrapper .element img { width: 412px; height: 412px; display: block; position: relative; z-index: 1; } section.aboutus .about_us_wrapper .element > * { width: 50%; vertical-align: middle; } section.aboutus .about_us_wrapper .element.left > * { float: right; } section.aboutus .about_us_wrapper .element.left .img-container { right: -45px; } section.aboutus .about_us_wrapper .element.left .element-data { text-align: right; padding: 80px 30px 40px; } section.aboutus .about_us_wrapper .element.left h2 { right: 192px; margin-bottom: 25px; } section.aboutus .about_us_wrapper .element.left h2 sup { left: 238px; } section.aboutus .about_us_wrapper .element.left h2::before { right: -224px; top: 66px; } section.aboutus .about_us_wrapper .element.left h2::after { right: -35px; top: 57px; } section.aboutus .about_us_wrapper .element.right > * { float: left; } section.aboutus .about_us_wrapper .element.right .img-container { left: -45px; } section.aboutus .about_us_wrapper .element.right .element-data { text-align: left; padding: 100px 40px 40px; } section.aboutus .about_us_wrapper .element.right h2 { left: 210px; } section.aboutus .about_us_wrapper .element.right h2 sup { left: 0; } section.aboutus .about_us_wrapper .element.right h2::before { left: -250px; } section.aboutus .about_us_wrapper .element.right h2::after { left: -63px; } @media (min-width: 768px) { section.aboutus .about_us_wrapper .element.no-image { height: 350px; } section.aboutus .about_us_wrapper .element.no-image .img-container { height: 350px; } section.aboutus .about_us_wrapper .element.no-image .element-data { padding-top: 0; padding-bottom: 0; } } section.aboutus .about_us_wrapper .element.year-1988 .img-shadow-container::before { display: none; } @media (max-width: 1024px) { section.aboutus .title { font-size: 50px; line-height: 1.2; } section.aboutus .subtitle { font-size: 16px; max-width: 640px; margin-left: auto; margin-right: auto; } section.aboutus .about_us_wrapper { overflow: visible; max-width: 640px; margin-left: auto; margin-right: auto; } section.aboutus .about_us_wrapper::after { left: 28px; top: 246px; } section.aboutus .about_us_wrapper .element { height: auto; } section.aboutus .about_us_wrapper .element img, section.aboutus .about_us_wrapper .element .img-shadow-container { width: 196px; height: 196px; } section.aboutus .about_us_wrapper .element.left > *, section.aboutus .about_us_wrapper .element.right > * { float: none; width: 100%; } section.aboutus .about_us_wrapper .element.left .img-container, section.aboutus .about_us_wrapper .element.right .img-container { text-align: center; left: 0; right: 0; height: auto; } section.aboutus .about_us_wrapper .element.left .element-data, section.aboutus .about_us_wrapper .element.right .element-data { text-align: left; padding: 10px 30px 40px 60px; } section.aboutus .about_us_wrapper .element.left h2, section.aboutus .about_us_wrapper .element.right h2 { left: 0; font-size: 50px; margin-bottom: 10px; } section.aboutus .about_us_wrapper .element.left h2 sup, section.aboutus .about_us_wrapper .element.right h2 sup { position: relative; top: -16px; left: 0; font-size: 25px; } section.aboutus .about_us_wrapper .element.left h2::before, section.aboutus .about_us_wrapper .element.right h2::before { display: none; } section.aboutus .about_us_wrapper .element.left h2::after, section.aboutus .about_us_wrapper .element.right h2::after { right: auto; left: -42px; top: 22px; z-index: 2; } section.aboutus .about_us_wrapper .element.left h3, section.aboutus .about_us_wrapper .element.right h3 { font-size: 25px; } section.aboutus .about_us_wrapper .element.left p, section.aboutus .about_us_wrapper .element.right p { font-size: 16px; } } @media (max-width: 767px) { section.aboutus .title { font-size: 42px; padding: 0; } section.aboutus .subtitle { max-width: 100%; } } body.page-admin.not-logged-in { background: #ffffff; height: auto; } body.page-admin.not-logged-in #block-system-main { width: 300px; margin: 100px auto 0; text-align: center; } body.page-admin.not-logged-in #block-user-login { background: #ffffff; text-align: center; margin: 30px 0 250px; } body.page-admin.not-logged-in #block-user-login form { width: 300px; margin: 0 auto; } body.page-admin.not-logged-in #block-user-login .block-title { width: 300px; margin: 0 auto; font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid #2C2A2B; } body.page-admin.not-logged-in #block-user-login label { margin-bottom: 5px; } body.page-admin.not-logged-in #block-user-login input { padding: 5px; border: 1px solid #CCCCCC; } body.page-admin.not-logged-in #block-user-login input[type="submit"] { padding: 5px 15px; background: #E5E5E3; cursor: pointer; } body.page-admin.not-logged-in #block-user-login input[type="submit"]:hover, body.page-admin.not-logged-in #block-user-login input[type="submit"]:focus { background: #ffffff; } body.page-admin.not-logged-in #block-user-login ul, body.page-admin.not-logged-in #block-user-login li { list-style: none; } body.page-admin.not-logged-in #block-user-login ul a, body.page-admin.not-logged-in #block-user-login li a { color: #2C2A2B; font-size: 12px; } body.page-taxonomy-term .title + p { width: 90%; max-width: 935px; } body.page-taxonomy-term .section-body .products.thumbnails { width: 80%; margin: auto; } body ._products-category .en_desc { display: block; } body ._products-category .fr_desc { display: none; } body.fr ._products-category .en_desc { display: none; } body.fr ._products-category .fr_desc { display: block; } @media (max-width: 479px) { body.page-taxonomy-term .section-body .products.thumbnails { width: 100%; } } body.page-recipes .title { margin-bottom: 25px; } body.page-recipes .thumbnails > li .btn { margin: 15px auto 15px; } body.page-recipes #recipesFilter { margin-bottom: 20px; } body.page-recipes #recipesFilter li { margin: 4px 10px; list-style: none; vertical-align: top; display: inline-block; } body.page-recipes #recipesFilter li a { font-size: 15px; display: inline-block; color: #2C2A2B; border: 2px solid #2C2A2B; border-radius: 25px; padding: 4px 40px 7px; text-decoration: none; background-repeat: no-repeat; text-align: center; height: 30px; } body.page-recipes #recipesFilter li a:after { width: 13px; height: 11px; content: "-"; text-indent: 999px; overflow: hidden; display: block; position: relative; left: 40%; top: 4px; } body.page-recipes #recipesFilter li a:hover, body.page-recipes #recipesFilter li a:focus, body.page-recipes #recipesFilter li a.active { color: #00833e; border-color: #00833e; } body.page-recipes #recipesFilter li a:hover:after, body.page-recipes #recipesFilter li a:focus:after, body.page-recipes #recipesFilter li a.active:after { width: 13px; height: 11px; background: url("../img/gral/bubble_drop.jpg"); } body.fr.page-recipes #recipesFilter li a { background-size: 50%; } @media (max-width: 767px) { body.page-recipes #recipesFilter li { margin: 10px 0px; display: block; } body.page-recipes #recipesFilter li a { min-width: 200px; } body.page-recipes section.section-body { padding-bottom: 30px; } } body.node-type-products .linkable { border-bottom: 1px #000 solid; } .page-strawberrybanana, .page-peachpassionfruit { text-align: left; } .page-strawberrybanana #product-description, .page-strawberrybanana #ingredients, .page-peachpassionfruit #product-description, .page-peachpassionfruit #ingredients { text-align: left; } .page-strawberrybanana #product-description p, .page-strawberrybanana #ingredients p, .page-peachpassionfruit #product-description p, .page-peachpassionfruit #ingredients p { padding-left: 25px; } .product-details { text-align: left; background: #ffffff; padding-top: 20px; padding-bottom: 80px; } .product-details .title-container { position: relative; z-index: 1; height: calc(606px - 370px); } .product-details .title-container::before { content: ' '; top: -250px; left: -100vw; width: 200vw; height: 606px; background: #f58016; z-index: -1; position: absolute; display: block; } .product-details .title-container h1 { color: #ffffff; text-align: left; font-size: 56px; line-height: 78px; text-transform: uppercase; } .product-details > .container > div { padding: 20px 0; } .product-details > .container > div > div:first-child { width: 35%; float: left; text-align: center; } .product-details > .container > div > div.copy-for-description { padding-left: 50px; width: 65%; float: right; } .product-details > .container > div > div.copy-for-description h2 { color: #00833e; font-size: 35px; margin-bottom: 36px; margin-top: -10px; text-transform: uppercase; } .product-details > .container > div > div.copy-for-description .linkable-items { margin-top: 152px; } .product-details > .container > div > div.copy-for-description hr { display: none; } .product-details > .container > div > div.copy-for-description p { font-size: 16px; line-height: 26px; } .product-details > .container > div > div.copy-for-description .product-disclaimer p { margin: 15px 0; } .product-details > .container > div > div img { margin-top: 5px; max-height: 642px; max-width: 100%; position: relative; z-index: 2; } .product-details .expandible { padding-bottom: 15px; } .product-details .expandible p.small { font-size: 80% !important; } .product-details .bottom-disclaimer { color: #000; padding-left: 55px; position: relative; margin: 30px 0 40px; font-size: 15px; line-height: 1.2; text-align: left; } .product-details .bottom-disclaimer:before { content: ' '; background: url(../img/gral/attention-sign.png) no-repeat 0 0; display: block; width: 40px; height: 40px; position: absolute; left: 0; top: 0; } .fr .product-details .title-container h1.font-55 { font-size: 55px; line-height: 68px; } .fr .product-details .title-container h1.font-54 { font-size: 54px; line-height: 66px; } .fr .product-details .title-container h1.font-51 { font-size: 51px; line-height: 64px; } .ie .product-details { padding-top: 150px; } #nutrition-facts .serving-size { padding: 0px 20px 10px; text-align: left; border-bottom: 1px solid #00833e; margin-bottom: 20px; } .social-buy-it { padding-top: 25px; } .social-buy-it > div:first-child { float: left; } .social-buy-it > div:first-child + div { float: right; } .social-buy-it .btn { padding: 12px 60px; text-transform: uppercase; } .social-buy-it h4 { float: left; padding-top: 13px; font-size: 20px; margin-right: 15px; color: #2C2A2B; } .social-buy-it .social-lists { float: right; } .social-buy-it .social-lists li { display: inline-block; } .social-buy-it .socials { -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: block; background: rgba(10, 10, 10, 0) url(../img/gral/sprite.png) no-repeat; width: 50px; height: 50px; border: 4px solid #008752; text-indent: -9999px; float: left; margin: 0 1.5%; } .social-buy-it .socials.facebook { background-position: -108px -67px; } .social-buy-it .socials.twitter { background-position: -180px -69px; } .social-buy-it .socials.instagram { background-position: -249px -65px; } .social-buy-it .socials.youtube { background-position: -175px -65px; } .social-buy-it .socials:hover, .social-buy-it .socials:focus { background-color: #CCCCCC; } @media (max-width: 980px) { .product-details .title-container h1 { font-size: 48px; line-height: 1.2; } .product-details > .container > div { padding: 0; } } @media (max-width: 767px) { .element-free { display: none; } .product-details { padding-top: 0; padding-bottom: 0; } .product-details .element-free-1 { top: 8%; } .product-details .element-free-2 { right: 0; top: 4%; } .product-details .title-container { padding-top: 60px; position: relative; height: auto; min-height: 160px; } .product-details .title-container::before { top: 0; left: -10%; width: 130%; height: 140%; } .product-details .title-container h1 { font-size: 30px; line-height: 36px; text-align: center; padding: 30px 0 10px; position: relative; } .product-details > .container > div > div:first-child + div { float: none; } .product-details > .container > div > div.copy-for-description .linkable-items { margin-top: 50px; } .product-details > .container > div > div img { margin-top: 0; max-width: 200px; } .product-details .bottom-disclaimer { font-size: 13px; line-height: 20px; } .fr .product-details .title-container h1 { font-size: 30px; line-height: 35px; } body.node-type-products .product-details .grid.row35-65 > div { padding-left: 0; width: 100%; } body.node-type-products #main-content #product-scope { margin-top: 0; padding-top: 0; background: #ffffff; } body.node-type-products .product-details > .container > div { padding: 0; } body.node-type-products #product-title-mobile { max-width: 90%; font-size: 25px; color: #00833e; line-height: 1em; text-align: center; margin: 20px auto; } body.node-type-products #product-title-mobile + img { max-width: 80%; max-height: 240px; margin-left: auto; margin-right: auto; } body.node-type-products .social-buy-it { text-align: center; border-top: 1px solid #00833e; } body.node-type-products .social-buy-it > div { float: none; } body.node-type-products .social-buy-it > div h4 { float: none; margin-right: 0; } body.node-type-products .social-buy-it > div .social-lists { padding-top: 10px; float: none; } } #recipe-details-full { padding-bottom: 25px; } #recipe-details-full .recipe-title h2 { font-weight: normal; color: #00833e; font-size: 40px; margin: 0 20%; } #recipe-details-full .header-bar { padding: 20px; margin-top: 24px; background-color: white; border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; text-align: center; line-height: 1em; } #recipe-details-full .header-bar ul { list-style-type: none; } #recipe-details-full .header-bar ul li { margin: 0 15px 0 0; display: inline-block; vertical-align: top; } #recipe-details-full .header-bar ul li > a { cursor: pointer; display: block; } #recipe-details-full .header-bar ul li > a p { color: #002d5b; text-align: left; padding: 7px 5px; line-height: 1; font-size: 15px; } #recipe-details-full .recipe-description-and-options { background: #ffffff; padding: 20px; } #recipe-details-full .recipe-description-and-options .desc { clear: both; color: #2C2A2B; text-align: center; line-height: 1.5em; margin: 0 0 30px 0; } #recipe-details-full .recipe-description-and-options h2 { margin-top: 25px; font-size: 35px; color: #2C2A2B; } #recipe-details-full .recipe-description-and-options h2 + hr { margin-top: 20px; } #recipe-details-full .recipe-description-and-options h2 + hr + p { margin-bottom: 25px; } #recipe-details-full .recipe-description-and-options > ul { float: left; list-style-type: none; } #recipe-details-full .recipe-description-and-options > ul > li { margin: 0 15px 0 0; float: left; position: relative; } #recipe-details-full .recipe-description-and-options > ul > li > a { cursor: pointer; display: block; } #recipe-details-full .recipe-description-and-options > ul > li > a p { padding: 10px 5px; line-height: 1.5; font-size: 15px; color: #2C2A2B; } #recipe-details-full .recipe-description-and-options > ul > li > a:hover p, #recipe-details-full .recipe-description-and-options > ul > li > a:focus p { text-decoration: underline; } #recipe-details-full .share-wrapper { width: 100%; background: #00833e; padding: 20px 0px; margin-top: 20px; } #recipe-details-full .share-wrapper ul { display: block; margin: 0px auto; text-align: center; } #recipe-details-full .share-wrapper ul li { display: inline-block; margin: 0px 15px; } #recipe-details-full .share-wrapper ul li a i.icon.share { background-position: -62px -383px; } #recipe-details-full .share-wrapper ul li a i.icon.vote { background-position: -113px -383px; } #recipe-details-full .share-wrapper ul li a p { padding: 10px 5px; line-height: 1.5; font-size: 15px; color: #ffffff; } #recipe-details-full .share-wrapper ul li a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } #recipe-details-full .share-wrapper ul li a:hover p { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #recipe-details-full .share-wrapper hr { background: #ffffff; width: 40%; height: 1px; } .voting { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; display: none; text-align: center; position: absolute; z-index: 2; width: 100%; padding: 20px 0 20px 0; margin-top: -15px; margin-left: 50px; } .voting select { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: none; margin: 23px auto 0; padding: 5px 0 5px 10px; cursor: pointer; background: #00833e; color: #ffffff; display: block; } #ratinglist .doSelect { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; cursor: pointer; display: block; width: 120px !important; margin: 10px auto -5px auto; text-align: left; padding: 10px 10px; background: transparent; } #ratinglist .doSelect strong { display: none; } #ratinglist .doSelect ul { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block !important; position: absolute; padding: 12px 0 11px 13px; background: #E5E5E3; top: -26px; left: 46px; width: 148px; } #ratinglist .doSelect ul > li { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin: 0; display: inline-block; padding: 2px 3px 3px 3px; background: url("../img/gral/greystar.png") no-repeat 0 0; width: 25px; height: 20px; text-indent: -9999px; border: 0; } #ratinglist .doSelect ul > li.active, #ratinglist .doSelect ul > li:hover, #ratinglist .doSelect ul > li:focus { background: url("../img/gral/blackstar.png") no-repeat 0 0; } #ratinglist .doSelect ul > li:first-child { display: none; } #recipe-details-full .recipe-description-and-options #votes { float: right; margin-top: 10px; } #recipe-details-full .recipe-description-and-options #votes .votes { margin: 5px 4px 10px 10px; display: inline-block; vertical-align: middle; } #recipe-details-full .share-wrapper .rating-wrapper #votes { margin-top: 10px; text-align: center; } #recipe-details-full .share-wrapper .rating-wrapper #votes .votes { background: url("../img/gral/whitestar.png") repeat; margin: 0px auto; display: inline-block; vertical-align: middle; } #recipe-details-full .share-wrapper .rating-wrapper #votes .rating { color: #ffffff; margin-top: 5px; } #recipe-details-full .ingredients-and-directions { width: 100%; } #recipe-details-full .ingredients-and-directions > div ul li, #recipe-details-full .ingredients-and-directions > div p { text-align: left; } #recipe-details-full .ingredients-and-directions #ingredients { border-bottom: 2px solid #00833e; } #recipe-details-full .ingredients-and-directions a.linkable { background: none; color: #00833e; border-radius: 0px; border-bottom: 2px solid #00833e; } #recipe-details-full .ingredients-and-directions a.linkable:after { background-image: url("../img/gral/arrow-expand.png"); } #recipe-details-full .ingredients-and-directions ul.ingredients-list { width: 100%; padding: 0; text-align: center; list-style-type: none; } #recipe-details-full .ingredients-and-directions ul.ingredients-list > li { display: block; position: relative; font-size: 16px; line-height: 1.8; min-height: 20px; float: none; } #recipe-details-full .ingredients-and-directions p { font-size: 16px; line-height: 1.5; } #recipe-details-full .ingredients-and-directions .directions ol { padding-left: 20px; } #recipe-details-full .ingredients-and-directions .directions ol li { margin-bottom: 10px; } .sharing { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; display: none; text-align: center; background: #ffffff; position: absolute; bottom: 15px; left: 0; z-index: 2; width: 100%; padding: 20px 0 20px 0; border: 2px solid #00833e; } .sharing #sharing-to { margin-top: 10px; width: 100%; text-align: center; } .sharing #sharing-to li { float: none; display: inline-block; margin-right: 10px; } .sharing #sharing-to li > a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; display: block; width: 30px; height: 30px; text-indent: -9999px; text-decoration: none; background: url("../img/gral/socialN.png") no-repeat; } .sharing #sharing-to li > a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .sharing #sharing-to li.fbshare a { background-position: -43px -8px; } .sharing #sharing-to li.twittershare a { background-position: -7px -8px; } .sharing #sharing-to li.googleshare a { background-position: -76px -8px; } .sharing #sharing-to li.instagramshare a { background-position: -112px -7px; } .sharing .closeit { cursor: pointer; width: 22px; height: 24px; text-indent: -9999px; display: block; position: absolute; right: 15px; top: 10px; text-decoration: none; background: url("../img/gral/closebtn.png") no-repeat; } .sharing .closeit:hover, .sharing .closeit:focus { opacity: 0.6; } #recipe-video .videolist li { width: 560px; height: 315px; max-width: 100%; } #recipe-video .videolist li .image-container { height: 315px; background-size: cover; } @media (max-width: 767px) { #recipe-details-full .recipe-title h2 { font-size: 25px; margin: 0 5%; } #recipe-details-full .recipe-description-and-options { position: relative; padding: 0; background: transparent; } #recipe-details-full .recipe-description-and-options > ul { width: 100%; text-align: center; } #recipe-details-full .recipe-description-and-options > ul > li { float: none; display: inline-block; margin-right: 7px; } #recipe-details-full .recipe-description-and-options > ul > li:last-child { display: none; } #recipe-details-full .header-bar ul li { width: 49%; margin: 0; } #recipe-details-full .header-bar ul li > a p { font-size: 12px; } #recipe-details-full .recipe-description-and-options .desc-wrap { padding: 10px; background-color: white; margin-bottom: 2px; } #recipe-details-full .recipe-description-and-options .desc { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; overflow: hidden; margin-bottom: 10px; text-align: center; } #recipe-details-full .recipe-description-and-options .desc.exp { height: auto; } #ratinglist .doSelect ul { top: -210px; left: -66px; } .voting { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); width: 120px; left: 50%; top: auto; bottom: -57px; } #recipe-details-full .recipe-description-and-options #votes { text-align: center; margin: 11px auto 30px auto; border-top: solid 1px #CCCCCC; display: block; width: 100%; } #recipe-details-full .recipe-description-and-options #votes .votes { display: block; margin: 25px auto 15px auto; } .sharing { bottom: -145px; } #recipe-details-full .ingredients-and-directions > div { width: 100%; } #recipe-details-full .ingredients-and-directions ul > li { padding-left: 0; } #recipe-video .videolist li { height: 200px; } #recipe-video .videolist li .image-container, #recipe-video .videolist li iframe { height: 200px; } } @media (min-width: 768px) { .container.faqs-container { max-width: 1004px; } } #section-faqs { padding-bottom: 0; } #section-faqs .title { margin: 10px auto 4px; } .faqs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 20px 0; z-index: 2; } .faqs .faqs-column { width: 50%; padding: 0 25px; } .faqs .to-open-faq { display: block; background-color: transparent; color: #00833e; cursor: pointer; padding: 18px 28px 18px 0; text-align: left; font-weight: bold; font-size: 25px; line-height: 1.2; transition: transform .4s; border-bottom: 1px solid #707070; text-decoration: none; position: relative; } .faqs .to-open-faq::after { -webkit-transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; content: ' '; display: block; background: url("../img/gral/arrow.svg") no-repeat center center; width: 24px; height: 15px; position: absolute; bottom: 22px; right: 0; top: auto; } .faqs .to-open-faq.active::after, .faqs .to-open-faq:hover::after, .faqs .to-open-faq:focus::after { transform: rotate(-180deg); } .faqs .panel { display: none; background-color: transparent; color: #000; overflow: hidden; text-align: left; margin: 25px 0; width: 100%; } .faqs .panel a { color: #00833e; text-decoration: none; } .faqs .panel a:hover, .faqs .panel a:focus { text-decoration: underline; } .faqs .panel p { font-size: 15px; line-height: 1.7; } .faqs-contact { margin: 0 0 30px; } .faqs-contact .contact-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 20px 0; } .faqs-contact .contact-grid > * { width: 50%; padding: 0 25px; } .faqs-contact .img-container { text-align: right; } .faqs-contact .img-container img { width: 455px; max-width: 100%; } .faqs-contact .body { padding-left: 20px; } .faqs-contact .body h2 { color: #00833e; font-size: 75px; text-transform: uppercase; margin-bottom: 42px; text-align: left; } .faqs-contact .body .option { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-bottom: 30px; } .faqs-contact .body .option .left { width: 28%; margin-left: 44px; } .faqs-contact .body .option .right { width: 52%; text-align: left; position: relative; top: 3px; } .faqs-contact .body .option .right a { text-decoration: underline; color: #00833e; } .faqs-contact .body .option .right p { font-size: 15px; line-height: 1.6; } .faqs-contact .body .option h3 { color: #00833e; font-size: 25px; text-transform: uppercase; text-align: left; position: relative; line-height: 1.5; } .faqs-contact .body .option h3::before { content: ' '; display: inline-block; position: absolute; margin: 5px; background-position: center; background-repeat: no-repeat; width: 34px; height: 34px; top: -3px; left: -54px; } .faqs-contact .body .option.phone h3::before { background-image: url("../img/gral/icon-mobile-green.png"); } .faqs-contact .body .option.email h3::before { background-image: url("../img/gral/icon-email-green.png"); } .faqs-contact .body .option.social a { display: inline-block; margin: 4px 10px 0 0; } .faqs-contact .body .option.social a.facebook { background-image: url("../img/gral/facebook-green.png"); width: 26px; height: 26px; } .faqs-contact .body .option.social a.youtube { background-image: url("../img/gral/youtube-green.png"); width: 30px; height: 22px; } @media (max-width: 767px) { .faqs .faqs-column { width: 100%; padding: 0; } .faqs .to-open-faq { padding-right: 28px; font-size: 22px; } .faqs-contact { margin: 0; } .faqs-contact .contact-grid { display: block; } .faqs-contact .contact-grid > * { width: 100%; padding: 0; } .faqs-contact .body { padding: 0; margin-top: 30px; } .faqs-contact .body h2 { font-size: 40px; text-align: center; } .faqs-contact .body .option .left { width: 36%; } .faqs-contact .body .option .right { width: 46%; } .faqs-contact .body .option:last-child { display: block; padding-top: 5px; } .faqs-contact .body .option:last-child .left, .faqs-contact .body .option:last-child .right { width: 100%; text-align: center; } .faqs-contact .body .option:last-child .left { margin-left: 0; } .faqs-contact .body .option:last-child .left h3 { text-align: center; } } @media (min-width: 768px) { .fr .faqs-contact .body .option .left, .fr .faqs-contact .body .option .right { width: 45%; } } @media (max-width: 767px) { .fr .faqs-contact .body .option:not(.social) .left { width: 47%; margin-left: 30px; } .fr .faqs-contact .body .option:not(.social) .right { width: 40%; } .fr .faqs-contact .body .option h3 { font-size: 18px; } .fr .faqs-contact .body .option h3::before { top: -5px; left: -45px; } } /** HELPERS **/ .srt { clip: rect(1px, 1px, 1px, 1px); position: absolute; margin: 0; padding: 0; } .srt:focus { background-color: #f6f6f6; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto; color: #004179; display: block; font-size: 14px; font-weight: bold; height: auto; line-height: normal; padding: 15px 23px 14px; position: absolute; left: 5px; top: 5px; text-decoration: none; text-transform: none; width: auto; z-index: 16; } @media (max-width: 767px) { #skip-link { display: none; } } .just-mobile { display: none !important; } .just-ipad { display: none !important; } @media (max-width: 980px) { .just-ipad { display: block !important; } .hide-portrait { display: none !important; } } @media (max-width: 767px) { .just-mobile { display: block !important; } .hide-mobile { display: none !important; } } .logged-in #admin-menu { display: none; } html body.admin-menu { margin-top: 0 !important; } .hidden { display: none !important; } /** COMPONENTS **/ /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2013 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%,100%,20%,53%,80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%,100%,20%,53%,80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%,100%,50% { opacity: 1; } 25%,75% { opacity: 0; } } @keyframes flash { 0%,100%,50% { opacity: 1; } 25%,75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%,100% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); -ms-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); -ms-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); -ms-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); -ms-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; -ms-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); -ms-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); -ms-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -ms-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); -ms-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); -ms-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -ms-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); -ms-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); -ms-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); -ms-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); -ms-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -ms-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -ms-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); -ms-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); -ms-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); -ms-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); -ms-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); -ms-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0, 0, 1, 45deg); transform: rotate(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0, 0, 1, 45deg); -ms-transform: rotate(0, 0, 1, 45deg); transform: rotate(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); -ms-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); -ms-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); -ms-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } .benefits { background-image: url("../img/gral/bg-benefits.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 110px 0 100px; } .benefits .grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .benefits .grid > div { width: 44%; } .benefits .grid > div:last-child { padding-left: 20px; text-align: left; width: 56%; } .benefits .grid > div img { margin: 0 auto; max-width: 100%; } .benefits .grid > div h2 { color: #007e34; line-height: 1; font-size: 92px; text-transform: uppercase; } .benefits .grid > div h2 span { font-size: 136px; line-height: 0.9; } .benefits .grid > div .description { margin-top: 15px; /*padding-left: 8px;*/ max-width: 639px; } .benefits .grid > div .description div, .benefits .grid > div .description p { color: #007e34; font-size: 26px; line-height: 32px; } .benefits .list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-top: 25px; } .benefits .list > div { padding: 0 1.2%; width: 20%; } .benefits .list > div img { max-width: 56%; } .benefits .list > div h3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; color: #f7783e; line-height: 1.2; font-size: 22px; margin: 25px 0 30px; min-height: 50px; } .benefits .list > div .description div, .benefits .list > div .description p { padding: 0; color: #000; font-size: 15px !important; line-height: 1.4; display: block; } .fr .benefits .grid > div img { margin-top: 30px; } .fr .benefits .grid > div h2 { font-size: 50px; } .fr .benefits .grid > div h2 span { font-size: 79px; line-height: 1.2; } .fr .benefits .grid > div .description { margin-top: 0; } .fr .benefits .grid > div .description div, .fr .benefits .grid > div .description p { font-size: 26px; line-height: 32px; } .fr .benefits .list > div h3 { font-size: 21px; } @media (max-width: 1400px) { .benefits .grid > div { width: 50%; } .benefits .grid > div:last-child { padding-left: 0; width: 50%; } .benefits .grid > div h2 { font-size: 78px; } .benefits .grid > div h2 span { font-size: 114px; } .benefits .grid > div .description { max-width: 86%; } .benefits .grid > div .description br { display: none; } .benefits .list > div h3 { margin: 15px 0; } .fr .benefits .grid > div h2 { font-size: 44px; } .fr .benefits .grid > div h2 span { font-size: 69px; } .fr .benefits .list > div h3 { font-size: 18px; } } @media screen and (max-width: 1150px) { .benefits .grid > div h2 { font-size: 50px; } .benefits .grid > div h2 span { font-size: 73px; } .benefits .list > div .description br { display: none; } .fr .benefits .grid > div img { margin-top: 0; } .fr .benefits .grid > div h2 { font-size: 38px; } .fr .benefits .grid > div h2 span { font-size: 63px; } } @media screen and (max-width: 1100px) { .fr .benefits .grid > div h2 { font-size: 28px; } .fr .benefits .grid > div h2 span { font-size: 44px; } } @media (max-width: 1024px) { .benefits .grid > div .description { max-width: 100%; } .benefits .list > div h3 { font-size: 18px; min-height: 40px; } .benefits .list > div .description div, .benefits .list > div .description p { font-size: 14px !important; } .fr .benefits .list > div .description div, .fr .benefits .list > div .description p { font-size: 14px !important; } } @media (max-width: 767px) { .benefits { padding: 80px 0 80px; } .benefits .grid > div { width: 100%; } .benefits .grid > div:last-child { padding: 60px 0 0; text-align: center; width: 100%; } .benefits .grid > div h2 { font-size: 46px; } .benefits .grid > div h2 span { font-size: 68px; } .benefits .grid > div .description { padding: 0; } .benefits .grid > div .description div, .benefits .grid > div .description p { font-size: 16px; line-height: 28px; } .benefits .list > div { margin-top: 20px; padding: 0 2px; width: 50%; } .benefits .list > div img { max-width: 70%; } .benefits .list > div h3 { font-size: 16px; margin: 15px 0; } .fr .benefits .grid > div h2 { font-size: 25px; } .fr .benefits .grid > div h2 span { font-size: 39px; } .fr .benefits .grid > div .description div, .fr .benefits .grid > div .description p { font-size: 16px; line-height: 28px; } .fr .benefits .list > div h3 { font-size: 16px; } } @media screen and (max-width: 767px) and (max-width: 380px) { .fr.safari .benefits .grid > div h2 span { margin-left: -13px; } } @media screen and (max-width: 380px) { .benefits .grid > div .description div, .benefits .grid > div .description p { font-size: 14px; line-height: 26px; } } .wow-children.animated > * { animation-fill-mode: both; animation-duration: .8s; animation-iteration-count: 1; } .wow-children.animated.trigger-children-left > * { animation-name: fadeInLeft; } .wow-children.animated.trigger-children-up > * { animation-name: fadeInUp; } .wow-children.animated > *:nth-child(1) { animation-delay: 0.05s; } .wow-children.animated > *:nth-child(2) { animation-delay: 0.1s; } .wow-children.animated > *:nth-child(3) { animation-delay: 0.15s; } .wow-children.animated > *:nth-child(4) { animation-delay: 0.2s; } .wow-children.animated > *:nth-child(5) { animation-delay: 0.25s; } .wow-children.animated > *:nth-child(6) { animation-delay: 0.3s; } .wow-children.animated > *:nth-child(7) { animation-delay: 0.35s; } .wow-children.animated > *:nth-child(8) { animation-delay: 0.4s; } .wow-children.animated > *:nth-child(9) { animation-delay: 0.45s; } .wow-children.animated > *:nth-child(10) { animation-delay: 0.5s; } .btn { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 8px; display: inline-block; font-size: 11px; line-height: 1.2; padding: 12px 20px; text-decoration: none; text-align: left; text-transform: uppercase; } .btn.btn-main { border: 3px #ffffff solid; color: #ffffff; padding: 12px 20px; background-color: #00833e; } .btn.btn-main:hover, .btn.btn-main:focus { color: #00833e; background-color: #ffffff; border: 3px #00833e solid; } .view-more-button { margin-top: 20px; } .carousel .owl-item { padding: 0 10px; } .carousel .owl-item > div { margin: 0 -3px 10px; } .carousel .owl-item > div a { text-decoration: none; } .carousel .owl-item > div a var, .carousel .owl-item > div a span { z-index: 2; width: 100%; display: block; font-style: normal; text-align: center; color: #ffffff; } .carousel .owl-item > div a span { z-index: 2; font-size: 20px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; bottom: 30px; padding: 0 150px; position: absolute; } .carousel .owl-item > div a var { font-size: 20px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; bottom: 30px; position: absolute; } .carousel + .view-more-button .btn { margin-top: 15px; } .section_carousel { display: none; } .section_carousel .owl-item > div a, .section_carousel > div:not(.owl-controls) a { display: block; width: 100%; height: 310px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .section_carousel .owl-item > div a:after, .section_carousel > div:not(.owl-controls) a:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .__related_recipes .section_carousel .owl-item > div a:after, .section_carousel > div:not(.owl-controls) a:after { background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.9) 100%); background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.9) 100%); } .owl-pagination { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); position: absolute; left: 50%; list-style-type: none; bottom: 10px; } .owl-pagination .owl-page { list-style: none; cursor: pointer; float: left; margin: 0 2px; } .owl-pagination .owl-page > a { display: block; width: 27px; height: 28px; background: url("../img/gral/sprite.png") no-repeat -310px -12px; } .owl-pagination .owl-page.active > a { background: url("../img/gral/sprite.png") no-repeat -278px -12px; } .owl-pagination .owl-page > a:hover, .owl-pagination .owl-page a:focus { background: url("../img/gral/sprite.png") no-repeat -278px -12px; } .section_carousel .owl-wrapper a:before { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-filter: drop-shadow(0px 0px 5px #ffffff); filter: drop-shadow(0px 0px 5px #ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; content: ''; position: absolute; top: -100%; left: 50%; display: block; background-size: 100%; background-repeat: no-repeat; width: 100px; height: 100px; } .section_carousel .owl-wrapper a:hover span, .section_carousel .owl-wrapper a:focus span { text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); } .section_carousel .owl-wrapper a:hover:before, .section_carousel .owl-wrapper a:focus:before { top: 0; } #featured-in.just-one .owl-item, #our-recipes.just-one .owl-item { display: inline-block; float: none; } @media (min-width: 981px) and (max-width: 1024px) { .carousel .owl-item > div a span { padding: 0px 20px; } .carousel .owl-prev, .carousel .owl-next { display: none; } } @media (max-width: 980px) { .carousel .owl-item > div a span { padding: 0px 20px; } .carousel .owl-prev, .carousel .owl-next { display: none; } } @media (max-width: 767px) { .section_carousel { display: block; } .section_carousel > div.recipe, .section_carousel div.collection { width: 48%; float: left; margin: 0 1% 1%; position: relative; border: 4px solid #ffffff; } .section_carousel > div.recipe a, .section_carousel div.collection a { display: block; height: 100px; color: white; text-decoration: none; } .section_carousel > div.recipe a span, .section_carousel div.collection a span { -webkit-filter: drop-shadow(0px 0px 5px #2C2A2B); filter: drop-shadow(0px 0px 5px #2C2A2B); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; z-index: 2; position: absolute; bottom: 30px; padding-left: 10px; padding-right: 10px; left: 0; display: block; width: 100%; text-align: center; font-family: "Archer-Medium", sans-serif; -webkit-font-smoothing: antialiased; font-weight: normal; } .section_carousel > div.recipe a var, .section_carousel div.collection a var { z-index: 2; font-style: normal; position: absolute; bottom: 12px; font-size: 12px; left: 0; width: 100%; display: block; text-align: center; } .section_carousel > div.recipe:first-child, .section_carousel div.collection:first-child { width: 98%; margin-left: auto; margin-right: auto; float: none; font-size: 25px; } .section_carousel > div.recipe:first-child a, .section_carousel div.collection:first-child a { height: 230px; } .section_carousel > div.recipe:nth-child(4), .section_carousel div.collection:nth-child(4) { display: none; } .section_carousel .owl-pagination { display: none; } .section_carousel + .view-more-button { margin-top: 0; } .owl-pagination { width: 80%; bottom: 30px; z-index: 6; } .owl-pagination ul { text-align: center; } .owl-pagination .owl-page { float: none; display: inline-block; } } #slider { border-bottom: none; margin-top: 0; padding: 0; display: block; width: 100%; overflow: hidden; } #slider #slides { height: 55vw !important; } #slider #slides > .slide { display: none; } #slider #slides > .slide:first-of-type { display: block; } #slider > .container { width: 100%; max-width: 100%; position: relative; overflow: hidden; } #slider .slide { height: 55vw; position: relative; width: 100%; text-align: left; background-size: cover; background-position: center center; } #slider .slide .content { width: 600px; max-width: 90%; text-align: center; margin: 0 auto; position: relative; overflow: hidden; padding-top: 100px; } #slider .slide h2 { color: #00833e; line-height: 1; margin-bottom: 25px; font-size: 70px; text-transform: uppercase; } #slider .slide p { text-shadow: 0px 0px 1px #ffffff; -webkit-filter: drop-shadow(0px 0px 2px #ffffff); filter: drop-shadow(0px 0px 2px #ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; padding: 0; color: #2C2A2B; font-size: 22px; line-height: 1.5; display: block; margin: 0 auto; } #slider .slide .btn { font-size: 22px; margin: 50px 0 0; padding: 12px 24px; } #slider .slide .full-slide { display: block; height: 100%; position: absolute; width: 100%; top: 0; left: 0; z-index: 2; } #slider .slide .video-itself { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; z-index: 999; width: 100%; height: auto; top: 50%; left: 50%; z-index: 0; } #slider .slide .video-layer { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 3; opacity: 0; height: 100%; } #slider .slide .video-layer:hover, #slider .slide .video-layer:focus { opacity: 1; } #slider .slide .video-layer .btn-playing { position: absolute; top: 0; left: 0; cursor: pointer; margin: 20px 0 0 20px; z-index: 10; } #slider .slide .video-layer .btn-playing > div { display: none; } #slider .slide .video-layer .btn-playing > div svg { width: 30px; height: 30px; } #slider .slide .video-layer .btn-playing > div.active { display: block; } #slider .slide .video-layer .btn-sound { position: absolute; top: 0; right: 0; cursor: pointer; margin: 20px 20px 0 0; z-index: 10; } #slider .slide .video-layer .btn-sound > div { display: none; } #slider .slide .video-layer .btn-sound > div svg { width: 30px; height: 30px; } #slider .slide .video-layer .btn-sound > div.active { display: block; } @media (max-width: 1024px) { #slider .slide .content { padding-top: 50px; } #slider .slide h2 { font-size: 50px; } #slider .slide p { font-size: 20px; } #slider .slide .btn { font-size: 20px; margin: 30px 0 0; padding: 8px 16px; } } @media (max-width: 767px) { #slider { height: 70vw; } #slider #slides { height: 70vw !important; } #slider > .container { height: 70vw; } #slider > .container .slide { height: 70vw; } #slider .slide .content { padding-top: 20px; } #slider .slide h2 { font-size: 9vw; margin-bottom: 10px; } #slider .slide p { font-size: 3vw; } #slider .slide .btn { font-size: 3vw; margin: 10px 0 0; } #slider .slide .video-itself { width: auto; height: 100%; } } .featured-product { height: 245px; margin: 10px 0 10px 0; position: relative; border: none; background: transparent url("../img/gral/featured-bg.jpg") no-repeat 0 0; background-size: cover; } .featured-product:before { position: absolute; top: 0; left: 0; content: ''; width: 140px; height: 140px; z-index: 2; background: transparent url("../img/gral/featured-product-ribon.png") no-repeat 0 0; background-size: cover; } .featured-product .title-button-container { position: absolute; top: 50px; left: 32%; width: 60%; text-align: center; overflow: hidden; } .featured-product .title-button-container h3 { margin: 0 0 20px; color: #3d1d06; font-size: 45px; text-transform: none; line-height: 1em; letter-spacing: -0.2px; } .featured-product .title-button-container h3.little { font-size: 34px; } .featured-product > img { -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -webkit-transform: rotate(-6deg); transform: rotate(-6deg); position: absolute; bottom: -20px; left: 12%; height: 285px; width: auto; -webkit-filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6)); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=7, Color='#444')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=7, Color='#444')"; } .supra-featured-overflow { height: 245px; overflow: hidden; padding-top: 20px; margin-top: -20px; margin-bottom: 20px; } .fr .featured-product:before { background: transparent url("../img/gral/featured-product-ribon_fr.png") no-repeat 0 0; background-size: cover; } @media (min-width: 981px) and (max-width: 1024px) { .featured-product .title-button-container h3 { font-size: 32px; } .featured-product .title-button-container h3.little { font-size: 27px; } .featured-product > img { height: 250px; } } @media (max-width: 980px) { .featured-product .title-button-container h3 { font-size: 32px; } .featured-product .title-button-container h3.little { font-size: 27px; } .featured-product > img { height: 250px; } } @media (max-width: 767px) { .supra-featured-overflow { height: auto; margin: 0; padding: 0; } .featured-product { height: 180px; background: transparent url("../img/gral/featured-mobile-bg.jpg") no-repeat 0 0; background-size: cover; } .featured-product:before { height: 80px; width: 80px; } .featured-product > img { left: 5%; bottom: 25px; max-width: 33%; height: auto; } .featured-product .title-button-container { top: 10px; } .featured-product .title-button-container h3 { font-size: 22px; } .featured-product .title-button-container h3.little { font-size: 18px; } .featured-product .title-button-container .btn { bottom: 70px; font-size: 16px; padding: 10px 20px; } } .featured-recipe-collection { -webkit-transition: box-shadow 0.3s ease-in-out; -moz-transition: box-shadow 0.3s ease-in-out; -o-transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.3s ease-in-out; display: block; position: relative; height: 245px; margin: 0 1%; background-size: cover; background-position: center center; } .featured-recipe-collection:hover, .featured-recipe-collection:focus { -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .featured-recipe-collection:before { position: absolute; top: 0; left: 0; content: ''; width: 140px; height: 140px; z-index: 5; background-size: cover; } .featured-recipe-collection:after { top: 0; left: 0; z-index: 3; content: ''; width: 100%; height: 100%; position: absolute; } .featured-recipe-collection .fakelink { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); color: #ffffff; text-decoration: none; position: absolute; left: 50%; bottom: 53px; font-size: 15px; z-index: 6; } .featured-recipe-collection h3 { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); position: absolute; bottom: 78px; color: white; font-size: 30px; left: 50%; z-index: 6; line-height: 30px; } .featured-recipe-collection .votes { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); position: absolute; left: 50%; bottom: 20px; } #collections a.featured-recipe-collection:before { background: transparent url("../img/gral/featured-collection-ribon.png") no-repeat 0 0; background-size: cover; } @media (max-width: 767px) { .featured-recipe-collection { margin-left: -1.5%; margin-right: -1.5%; } .featured-recipe-collection h3 { width: 90%; } } #getsocial .getsocial-header { text-align: center; padding: 10px 0 30px; } #getsocial .getsocial-header .title + div, #getsocial .getsocial-header .social-icons + div { display: block; width: 100%; text-align: center; color: #2C2A2B; } #getsocial .getsocial-header .title + div p, #getsocial .getsocial-header .social-icons + div p { font-size: 18px; line-height: 1; } #getsocial .getsocial-header .social-icons + div { margin: 30px auto 25px; } #getsocial .getsocial-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } #getsocial .getsocial-header .title { margin-bottom: 0; } #getsocial .getsocial-header .social-disc { display: inline-block !important; margin-left: 80px; width: auto !important; } #getsocial .getsocial-header .social-disc .social-icons { display: inline-block; text-align: center; vertical-align: middle; } #getsocial .getsocial-header .social-disc .social-icons .socials { -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; display: inline-block; text-indent: -9999px; margin: 0 5px; background: none; background-size: 44px; border: none; width: 44px; height: 44px; } #getsocial .getsocial-header .social-disc .social-icons .socials:hover, #getsocial .getsocial-header .social-disc .social-icons .socials:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #getsocial .getsocial-header .social-disc .social-text { display: inline-block; width: auto; margin: 0; padding-left: 10px; } #getsocial .getsocial-header .social-disc .social-text a { color: #00833e; display: inline-block; padding-top: 12px; text-align: left; text-decoration: none; } #getsocial .getsocial-header .social-disc .social-text a::after { background: #00833e; } #getsocial ul.feed { margin-bottom: 0; } #getsocial ul.feed > li { border: 0; margin: 1% 0.5% 0 0.5%; float: left; background-color: white; list-style: none; } #getsocial ul.feed { overflow-y: hidden; } #getsocial ul.feed .instagram, #getsocial ul.feed .twitter { width: 49%; } #getsocial ul.feed .facebook, #getsocial ul.feed .twitter { height: 280px; } #getsocial ul.feed li:first-child { width: 48%; height: calc( 570px + 2px ); } #getsocial ul.feed li:first-child a { position: relative; display: block; width: 100%; height: 100%; } #getsocial ul.feed li:first-child a:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; content: ''; display: block; width: 36px; height: 36px; position: absolute; bottom: 10px; right: 10px; background-size: 100%; } #getsocial ul.feed li:first-child a:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-size: 40%; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1); } #getsocial ul.feed li:first-child a:hover:before, #getsocial ul.feed li:first-child a:focus:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; background-size: 0; } #getsocial ul.feed li:first-child a:hover:after, #getsocial ul.feed li:first-child a:focus:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; background-size: 18%; } #getsocial ul.feed li:first-child a > div { height: 100%; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #getsocial ul.feed .twitter { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; background: #ffffff url("../img/gral/icon_twitter.png") no-repeat right 10px; background-size: 48px; } #getsocial ul.feed .twitter .wrap { padding: 30px 20px; background: transparent url("../img/gral/logo.png") no-repeat 15px 20px; background-size: 50px; } #getsocial ul.feed .twitter h4 { color: #2C2A2B; margin: 0; line-height: 1em; margin-left: 60px; text-align: left; } #getsocial ul.feed .twitter > div > a { color: #2C2A2B; font-size: 14px; margin-left: 60px; text-decoration: none; text-align: left; display: block; margin-top: 4px; float: left; } #getsocial ul.feed .twitter > div > a:hover, #getsocial ul.feed .twitter > div > a:focus { text-decoration: underline; } #getsocial ul.feed .twitter .__processTwitterText { height: 160px; } #getsocial ul.feed .twitter .__processTwitterText p { color: #2C2A2B; text-align: center; padding: 20px 0; margin-top: 25px; line-height: 1.3; font-size: 17px; display: inline-block; vertical-align: middle; width: 98%; } #getsocial ul.feed .twitter .__processTwitterText p a { color: #f45420; text-decoration: none; } #getsocial ul.feed .twitter .__processTwitterText p a:hover, #getsocial ul.feed .twitter .__processTwitterText p a:focus { text-decoration: underline; } #getsocial ul.feed .twitter .share-options > li { display: inline-block; vertical-align: middle; } #getsocial ul.feed .twitter .share-options a { text-decoration: none; padding: 8px 10px 8px 35px; margin: 0 5px; position: relative; outline: none; border: 0; box-shadow: none; -webkit-box-shadow: none; } #getsocial ul.feed .twitter .share-options a i { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; display: block; width: 26px; position: absolute; left: 7px; top: 9px; height: 20px; background: url("../img/gral/sprite.png") no-repeat; } #getsocial ul.feed .twitter .share-options .reply i { background-position: -236px -17px; } #getsocial ul.feed .twitter .share-options .reply:hover i, #getsocial ul.feed .twitter .share-options .reply:focus i { background-position: -236px -42px; } #getsocial ul.feed .twitter .share-options .retweet i { background-position: -197px -17px; } #getsocial ul.feed .twitter .share-options .retweet:hover i, #getsocial ul.feed .twitter .share-options .retweet:focus i { background-position: -197px -42px; } #getsocial ul.feed .twitter .share-options .favourite i { background-position: -161px -16px; } #getsocial ul.feed .twitter .share-options .favourite:hover i, #getsocial ul.feed .twitter .share-options .favourite:focus i { background-position: -161px -41px; } #getsocial ul.feed .facebook { width: 24%; } #getsocial ul.feed .facebook a { display: block; position: relative; width: 100%; height: 100%; background-size: cover; background-position: center center; } #getsocial ul.feed .facebook a:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; content: ''; display: block; width: 36px; height: 36px; position: absolute; bottom: 10px; right: 10px; background: url("../img/gral/icon-facebook.png") no-repeat center center; background-size: 100%; } #getsocial ul.feed .facebook a:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background: url("../img/gral/icon-facebook.png") no-repeat center center; background-size: 40%; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1); } #getsocial ul.feed .facebook a:hover:before, #getsocial ul.feed .facebook a:focus:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; background-size: 0; } #getsocial ul.feed .facebook a:hover:after, #getsocial ul.feed .facebook a:focus:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; background-size: 25%; } @media (max-width: 980px) { #getsocial ul.feed li:first-child { height: 500px; } #getsocial ul.feed .facebook, #getsocial ul.feed .twitter { height: 247px; } #getsocial ul.feed .instagram { height: 500px; } #getsocial ul.feed .twitter .__processTwitterText { height: auto; } #getsocial ul.feed .twitter .__processTwitterText p { font-size: 16px; margin-top: 0; } } @media (max-width: 767px) { #getsocial { padding-bottom: 0; } #getsocial .container { padding: 0; } #getsocial .getsocial-header { text-align: center; } #getsocial .getsocial-header .social-disc { margin-left: 0; } #getsocial .getsocial-header .social-disc .social-text { padding-left: 4px; } #getsocial .getsocial-header .title { margin-bottom: 20px; } #getsocial .getsocial-header .social-icons { float: none !important; margin-bottom: 10px; } #getsocial .getsocial-header .social-text a { text-align: center !important; } #getsocial .getsocial > div { float: none; display: block; margin: 10px auto; } #getsocial ul.feed > li { float: none; margin: 0 0 10px; } #getsocial ul.feed > li:nth-child(odd) { float: left; } #getsocial ul.feed > li:nth-child(even) { float: right; } #getsocial ul.feed > li::after { display: none; } #getsocial ul.feed > li.facebook, #getsocial ul.feed > li.instagram { width: 48vw; height: 50vw; } #getsocial ul.feed > li.post-4 { display: none; } #getsocial ul.feed .facebook { height: 250px; } #getsocial ul.feed .instagram { height: 350px; } } @media (min-width: 768px) { .fr #getsocial .getsocial-header .social-disc { margin: 20px auto; } } #header-top { width: 100%; display: block; height: 400px; background-size: cover; background-position: center center; position: relative; border-bottom: none; } #header-top .content { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; position: absolute; left: 50%; top: 50%; } #header-top.single-recipe-header-top { height: 370px; } @media (max-width: 767px) { #header-top { top: 0; height: 162px; } } .navigator { background: #ffffff url(../img/content/divisor.jpg) no-repeat center 100px; position: static; display: block; width: 100%; height: auto; } .navigator .content-links { background: #00833e; color: #ffffff; } .navigator .content-links a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; min-height: 80px; width: 50%; text-decoration: none; height: 80px; position: relative; } .navigator .content-links a:hover, .navigator .content-links a:focus { background: #E1DECE; } .navigator .content-links a img { max-height: 80px; } .navigator .content-links a span { position: absolute; height: 100%; display: inline-block; width: auto; font-size: 20px; padding: 28px; color: white; z-index: 2; } .navigator .content-links a span:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; content: ''; position: absolute; top: 28px; width: 15px; height: 25px; background: url("../img/gral/recipe-arrow-nav.png") no-repeat; } .navigator .content-links a:hover span { color: #00833e; } .navigator a:first-child { float: left; } .navigator a:first-child span + img { float: left; position: absolute; top: 0; left: 0; } .navigator a:first-child span { padding-left: 40px; left: 160px; float: right; } .navigator a:first-child span:after { left: 15px; background-position: 0 0; } .navigator a:first-child:hover span:after, .navigator a:first-child:focus span:after { left: 10px; background-position: -35px 0px; } .navigator a:first-child:before { border-left: 1px solid #999; content: " "; display: block; height: 60px; position: absolute; top: 10px; right: 0; } .navigator a:first-child + a { float: right; } .navigator a:first-child + a span + img { float: right; position: absolute; right: 0; top: 0; width: 160px; height: 100%; } .navigator a:first-child + a span { float: left; padding-right: 40px; right: 160px; } .navigator a:first-child + a span:after { left: inherit; right: 15px; background-position: -35px -40px; } .navigator a:first-child + a:hover span:after, .navigator a:first-child + a:focus span:after { right: 10px; background-position: 0px -40px; } @media (max-width: 767px) { #header-top.single-recipe-header-top { height: 240px; border-bottom: none; } .navigator { height: 50px; position: relative; } .navigator a:first-child + a span { right: 90px; } .navigator .content-links { height: 50px; } .navigator .content-links > a { min-height: 50px; height: 50px; } .navigator .content-links > a span { left: 90px; max-height: 69px; padding: 0; background-color: transparent; width: 0; text-indent: -9999px; } .navigator .content-links > a span:after { background: url("../img/gral/mobile-arrows.png") no-repeat 0 0; background-size: 100%; top: 3px; width: 12px; height: 20px; } .navigator .content-links > a span + img { top: 0; bottom: auto; max-height: 50px; max-width: 100px; } .navigator .content-links > a:first-child span { padding-left: 20px; top: 10px; } .navigator .content-links > a:first-child span:after { left: 20px; } .navigator .content-links > a:first-child:before { content: none; } .navigator .content-links > a:first-child + a span { padding-right: 20px; top: 10px; left: auto; } .navigator .content-links > a:first-child + a span:after { right: 20px; background-position: left bottom; } } .icon { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; position: relative; top: 2px; display: inline-block; width: 20px; height: 20px; margin-right: 3px; background: url("../img/gral/sprite.png") no-repeat; } .icon.fb { top: 3px; background-position: -170px -210px; } .icon.twitter { top: 3px; background-position: -193px -210px; } .icon.instagram { background-position: -217px -210px; top: 4px; } .icon.youtube { background-position: -243px -210px; top: 3px; } .icon.pinterest { background-position: -269px -210px; top: 4px; } .icon.googleplus { background-position: -339px -209px; top: 3px; } .icon.location { background-position: -45px -12px; top: 0; } .icon.newsletter { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-position: -78px -15px; width: 28px; height: 18px; top: 4px; margin-left: 0; } .icon.customized { background-position: 0 0; background-size: 22px; top: 3px; } .icon.prep { cursor: default; width: 40px; height: 40px; background-position: -10px -383px; } .icon.prep + p { cursor: default; float: right; } .icon.time { cursor: default; width: 40px; height: 40px; background-position: -11px -198px; } .icon.time + p { cursor: default; float: right; } .icon.share { width: 40px; height: 40px; background-position: -61px -198px; } .icon.share + p { float: right; } .icon.email-share { width: 40px; height: 40px; background-position: -288px -387px; } .icon.email-share + p { float: right; } .icon.print { width: 40px; height: 40px; background-position: -342px -386px; } .icon.print + p { float: right; } .icon.vote { width: 40px; height: 40px; background-position: -113px -198px; } .icon.vote + p { float: right; } #newsletter { background: #00833e; position: relative; padding-bottom: 0; margin-bottom: 20px; } #newsletter h3.title { margin-bottom: 20px; margin-top: 8px; color: #ffffff; } #newsletter-form { padding-bottom: 30px; } #newsletter-form fieldset { padding: 0; margin: 0; } #newsletter-form legend { color: #ffffff; font-size: 18px; text-align: center; width: 100%; } #newsletter-form legend strong { font-size: 21px; display: inline-block; margin-bottom: 9px; } #newsletter-form .btn { margin: 20px auto 15px; border-color: #ffffff; } #newsletter-form .doCheckbox { -webkit-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; display: block; width: 31px; height: 31px; border: 0; position: absolute; top: 7px; background: #ffffff; left: -26px; } #newsletter-form .doCheckbox.checked { border-color: transparent; background: #ffffff url("../img/gral/sprite.png") no-repeat -284px -145px; } #newsletter-form .doCheckbox.error { border: solid 2px #CA1010; } #newsletter-form .section { width: 55%; margin: 0 auto; padding: 0.5em; text-align: left; } #newsletter-form .section input.invalid { box-shadow: -2px -2px 3px #CA1010 inset, 2px 2px 3px #CA1010 inset; } #newsletter-form .section.first { padding-top: 34px; } #newsletter-form .section.first > * { -webkit-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #2C2A2B; line-height: 1.5; margin: 5px 1.75% 18px; padding: 10px 2%; border: 0; font-size: 17px; width: 46%; } #newsletter-form .section.first br { display: none; } #newsletter-form .section.first ::-webkit-input-placeholder, #newsletter-form .section.first :-moz-placeholder, #newsletter-form .section.first ::-moz-placeholder, #newsletter-form .section.first :-ms-input-placeholder { color: #f6f6f6; } #news_postal_code::-webkit-input-placeholder, #news_postal_code:-moz-placeholder, #news_postal_code::-moz-placeholder, #news_postal_code:-ms-input-placeholder { color: #999; opacity: 1; } #newsletter-form .section.second { position: relative; padding-left: 20px; text-align: left; max-width: 46%; display: block; margin: -13px auto 0; } #newsletter-form .section.second > input[type="checkbox"] { left: 0; opacity: 0; position: absolute; z-index: -1; } #newsletter-form .section.second > label.newsletter_validator_msg { color: #ffffff; font-size: 12px; line-height: 16px; border: none; } #newsletter-form .section.second > label.newsletter_validator_msg.error { border-bottom: solid 2px #CA1010; } .__gosignupnewsletter.disabled { position: relative; } .__gosignupnewsletter.disabled:after { content: 'please wait'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 10px; background: #f4531c; } .fr .__gosignupnewsletter.disabled:after { content: 'attendez'; } #newsletter .response-popover { background: #ffffff; display: none; position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 7; } #newsletter .response-popover .content { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: none; max-width: 90%; margin: 0 auto; text-align: center; padding: 20px; position: absolute; top: 50%; left: 50%; width: 550px; height: auto; } #newsletter .response-popover .content > div { background: #00833e; width: 100%; height: 100%; padding: 40px 20px; } #newsletter .response-popover .content > div .btn { margin-top: 20px; } #newsletter .response-popover h3 { color: #ffffff; line-height: 1em; text-transform: uppercase; margin-bottom: 20px; font-size: 30px; position: relative; } #newsletter .response-popover p { color: #ffffff; line-height: 1.2em; } #newsletter-disclaimer { margin: 0 auto 0; width: 55%; max-width: 90%; } #newsletter-disclaimer p { color: #ffffff; text-align: left; font-size: 12px; line-height: 15px; margin: 15px 0; } @media (max-width: 980px) { #newsletter #newsletter-form .section { width: 75%; } } @media (max-width: 767px) { #newsletter #newsletter-form .section { width: 100%; position: relative; } #newsletter #newsletter-form .section input[type="text"], #newsletter #newsletter-form .section input[type="email"] { width: 97%; margin: 10px auto; -webkit-appearance: none; } #newsletter #newsletter-form .section.second { max-width: 100%; } #newsletter #newsletter-form .section.second > label { padding-left: 45px; padding-right: 35px; display: block; } #newsletter #newsletter-form .section.second > label b { left: 26px; } #newsletter #newsletter-form .doCheckbox { left: 20px; } #newsletter-disclaimer { width: 90%; } } @media (max-width: 1050px) { body.no-brands #header-top { height: 50vw; max-height: 260px; } body.no-brands.page-products #header-top { background-position: right center; } body.no-brands #headers { top: 0; } body.no-brands #open-button { top: -22px; } body.no-brands .search-mobile { top: 9px; } } .performance-facts { padding: 20px 0; line-height: 1.4; width: 100%; margin: 0; float: none; } .performance-facts table { border-collapse: collapse; width: 100%; } .performance-facts tbody { border-top: none; } .performance-facts .info-header { color: #00833e; font-size: 18px; text-align: left; padding: 0 16px 9px 16px; } .performance-facts .info-header br { margin: 2px; } .performance-facts .info-header .align-left { float: left; margin-left: 35%; } .performance-facts .info-header .align-right { float: right; } .performance-facts tbody > tr:nth-child(odd) { background-color: #F1F1F1; } .performance-facts tbody > tr td, .performance-facts tbody > tr th { border: 0; width: 35%; text-align: left; white-space: nowrap; padding: 12px 16px; } .performance-facts tbody > tr td:nth-child(2) { width: 24%; } .performance-facts tbody > tr td:last-child { text-align: right; width: 24%; } .performance-facts tbody > tr .blank-cell { width: 1rem; border-top: 0; padding-left: 30px; } .performance-facts p, .performance-facts td, .performance-facts th { color: #2C2A2B; font-size: 16px; } .performance-facts .small-info { font-size: 12px; } body.node-type-recipes #nutrition-facts { width: 64%; margin-left: 18%; } .nutrition-intro { margin: 0 0 30px; line-height: 1.2; color: #444; } @media (max-width: 980px) { .performance-facts tbody > tr th { font-size: 16px; } } @media (max-width: 767px) { .performance-facts { padding: 20px 10px; } .performance-facts .info-header { padding: 0 8px 9px 8px; } .performance-facts .info-header .align-left { width: 33%; margin-left: 42%; } .performance-facts .info-header span:nth-child(2) { width: 24%; text-align: right; } .performance-facts tbody > tr td, .performance-facts tbody > tr th { padding: 8px; } .performance-facts tbody > tr .blank-cell { padding-left: 16px; } body.node-type-recipes #nutrition-facts { width: 100%; margin-left: 0; } } @media all and (min-width: 768px) and (max-width: 1170px) { .node-type-products .performance-facts .info-header { font-size: 14px; } } @media all and (min-width: 768px) and (max-width: 950px) { .node-type-products .performance-facts .info-header { font-size: 14px; } .node-type-products .performance-facts .info-header .align-left { margin-left: 40%; } } .scroll { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.7s; -webkit-animation-name: scale; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; -moz-animation-delay: 0s; -moz-animation-duration: 0.7s; -moz-animation-name: scale; -moz-animation-fill-mode: forwards; -moz-animation-iteration-count: 1; -o-animation-delay: 0s; -o-animation-duration: 0.7s; -o-animation-name: scale; -o-animation-fill-mode: forwards; -o-animation-iteration-count: 1; animation-delay: 0s; animation-duration: 0.7s; animation-name: scale; animation-fill-mode: forwards; animation-iteration-count: 1; -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; border-radius: 3px 3px 0 0; bottom: 0; content: ""; height: 4.4rem; left: 50%; margin-left: -2.1rem; position: fixed; width: 4.4rem; z-index: 2; text-align: center; } .scroll em { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 1s; -webkit-animation-name: bounce; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; -moz-animation-delay: 0.8s; -moz-animation-duration: 1s; -moz-animation-name: bounce; -moz-animation-fill-mode: forwards; -moz-animation-iteration-count: 1; -o-animation-delay: 0.8s; -o-animation-duration: 1s; -o-animation-name: bounce; -o-animation-fill-mode: forwards; -o-animation-iteration-count: 1; animation-delay: 0.8s; animation-duration: 1s; animation-name: bounce; animation-fill-mode: forwards; animation-iteration-count: 1; background: transparent url("../img/gral/sprite.png") no-repeat scroll -229px -378px; content: "v"; bottom: 1.2rem; display: block; height: 2.1rem; left: 1.07rem; position: absolute; width: 2rem; } .scroll span { color: #ffffff; font-size: 12px; position: relative; top: 0.55rem; } .menu-button { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: 10; width: 2.0em; height: 2.25em; border: none; text-indent: 2.5em; font-size: 1.5em; color: transparent; background: transparent; position: absolute; left: 50%; top: -5px; outline: none; } .menu-button:before { background-image: url("../img/gral/sprite.png"); background-position: -66px -111px; background-size: 135px auto; background-repeat: no-repeat; bottom: 0.5em; content: ""; left: 0.5em; position: absolute; right: 0.5em; top: 0.5em; } .collapsed-header .menu-button { top: -7px; height: 44px; } .collapsed-header .menu-button:before { background-position: -112px -104px; } .menu-button:hover { opacity: 0.6; } #our-recipes h3.title { margin-bottom: 10px; } #our-recipes .title_sub { line-height: 1.2; font-size: 40px; margin-bottom: 30px; text-align: center; color: #008752; } #our-recipes .title_sub sub { top: -0.7em; } @media (max-width: 980px) { #our-recipes .title_sub { font-size: 30px; } } @media (max-width: 1050px) { .scroll { display: none; } .menu-button { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: -21px; top: 18px; position: fixed; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; } .menu-button:before { background-position: -89px -147px; background-size: 196px auto; } #our-recipes .title_sub { font-size: 25px; } } /* Core Owl Carousel CSS File v1.3.3 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0, 0, 0); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* mouse grab icon */ .grabbing { cursor: url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } #product-categories { padding-bottom: 30px; } #product-categories .title { margin-bottom: 40px; } .product-categories { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; max-width: 980px; margin: 0 auto; } .product-categories > li { list-style: none; display: inline-block; width: 50%; } .product-categories > li .smaller { background: none; width: 100%; margin-bottom: 30px; max-width: 100%; padding: 0 10px; table-layout: fixed; } .product-categories > li .smaller .category_title_wrapper { display: table; width: 100%; } .product-categories > li .smaller h3 { text-align: center; width: 100%; font-size: 30px; line-height: 32px; letter-spacing: 0.5px; margin-bottom: 10px; color: #00833e; height: 80px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; display: table-cell; flex-direction: column; justify-content: center; text-transform: uppercase; } .product-categories > li .smaller .product-category-link { border: 1px #d4d5d6 solid; display: block; height: 325px; background: #ffffff; position: relative; } .product-categories > li .smaller .product-category-link .product-category-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 100%; } .product-categories > li .smaller .product-category-link .product-category-content .img { max-height: 264px; z-index: 1; } @media (max-width: 767px) { .product-categories > li .smaller .product-category-link .product-category-content .img { max-width: 90%; } } .product-categories > li .smaller .product-category-link .product-category-content .product-category-background { background-color: #04A057; position: absolute; bottom: 0; left: 0; width: 100%; height: 110px; } .product-categories > li .smaller .product-category-link:hover img { -webkit-filter: drop-shadow(0px 0px 7px #999); filter: drop-shadow(0px 0px 7px #999); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='$color')"; } .product-categories > li .smaller .btn { margin-top: 17px; } .product-categories .btn-parent { text-align: center; } ._products-category._products-category-page { padding-top: 40px; } @media (max-width: 767px) { ._products-category._products-category-page .title { font-size: 32px; text-align: left; margin-bottom: 20px !important; } ._products-category._products-category-page .en_desc p, ._products-category._products-category-page .fr_desc p { text-align: left; } } .related-products .title { font-size: 64px; line-height: 1; letter-spacing: 0.5px; } .related-products .title:after { -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); background-color: #ffc500; border-radius: 5px; content: ' '; display: block; position: absolute; bottom: -30px; left: 50%; height: 6px; width: 60px; } .related-products .thumbnails { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } @media (max-width: 767px) { .product-categories > li { margin-bottom: 20px; padding-bottom: 25px; border-bottom: 1px solid #ffffff; width: 100%; } .product-categories > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .product-categories > li .smaller .product-category-link { /*max-height: 250px;*/ padding: 0px; } #product-categories .title { font-size: 35px; } .related-products .title { font-size: 32px; } .related-products .title:after { width: 50px; } } section.pre-product { text-align: center; padding: 80px 0; } section.pre-product h2 { text-transform: uppercase; } section.pre-product p { color: #000; font-size: 16px; line-height: 1.6; margin: 20px auto; text-align: center; } section#our-product { padding: 0; } .product-promotion { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .product-promotion img { max-width: 100%; vertical-align: top; } .product-promotion .product-promotion-item { width: 50%; height: 597px; background-color: #f9c412; position: relative; overflow: hidden; } .product-promotion .product-promotion-item.full-image img { width: 100%; height: 100%; } .product-promotion .product-promotion-item.item-text { background-repeat: no-repeat; } .product-promotion .product-promotion-item.item-text .text-container { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } .product-promotion .product-promotion-item.pure-juice { background-image: url(../img/home/pure-juice-background.png); background-position: left center; } .product-promotion .product-promotion-item.pure-joy { background-image: url(../img/home/pure-joy-background.png); background-position: center bottom; } @media (max-width: 1200px) { #our-product .container { padding: 0; } .product-promotion .product-promotion-item { height: 50vw; } } @media (max-width: 767px) { section.pre-product { padding: 50px 0; } section.pre-product h2 { font-size: 38px; } section.pre-product p { font-size: 18px; max-width: 300px; } .product-promotion { display: block; } .product-promotion .product-promotion-item { width: 100%; height: auto; } .product-promotion .product-promotion-item.item-text { height: 100vw; } } /*@media (max-width: 370px) { .fr { section { &.pre-product { p { font-size: 14px; } } } } }*/ #promotions { padding: 15px 0; background-color: #ffffff; } .promotion { padding: 10px 0; } .promotion > .content { width: 60%; float: left; margin: 0; text-align: left; } .promotion > .content h2 { font-size: 35px; color: #f4531c; padding: 0 2% 0 0; margin-bottom: 10px; text-transform: uppercase; } .promotion > .content h2 em { display: block; font-style: normal; font-size: 50px; text-transform: uppercase; } .promotion > .content p { color: #2C2A2B; font-size: 17px; line-height: 1.3; padding: 5px 0; } .promotion > .content .btn { font-size: 15px; } .promotion > .img-container { float: right; width: 40%; } .promotion > .img-container img { max-width: 100%; } @media (max-width: 767px) { #promotions .promotion { width: 100%; } #promotions .promotion > .content { padding-top: 0; padding-bottom: 25px; width: 95%; margin: 0 auto; } #promotions .promotion > .content h2 { font-size: 26px; } #promotions .promotion > .content .btn { width: 70%; } } .routine { background-image: url("../img/gral/bg-routine.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; padding: 180px 0; } .routine .content { text-align: left; width: 52%; } .routine .content h2 { color: #ffffff; line-height: 1.1; font-size: 90px; text-transform: uppercase; } .routine .content h2 span { font-size: 79px; display: block; } .routine .content .description { max-width: 610px; padding-left: 6px; margin-top: 35px; } .routine .content .description div, .routine .content .description p { padding: 0; color: #ffffff; font-size: 26px; line-height: 1.2; display: block; } .fr .routine .content h2 { font-size: 104px; } .fr .routine .content h2 span { font-size: 66px; } .fr .routine .content .description { max-width: 520px; } @media screen and (max-width: 1200px) { .routine .content h2 { font-size: 80px; } .routine .content h2 span { font-size: 70px; } .fr .routine .content h2 { font-size: 91px; } .fr .routine .content h2 span { font-size: 58px; } } @media screen and (max-width: 1120px) { .routine .content h2 { font-size: 60px; } .routine .content h2 span { font-size: 53px; } .fr .routine .content h2 { font-size: 69px; } .fr .routine .content h2 span { font-size: 44px; } } @media screen and (max-width: 1098px) { .routine .content .description br { display: none; } } @media (max-width: 980px) { .routine .content h2 { font-size: 57px; } .routine .content h2 span { font-size: 50px; } .routine .content .description div, .routine .content .description p { font-size: 21px; } .routine img { max-width: 100%; } .fr .routine .content h2 { font-size: 64px; } .fr .routine .content h2 span { font-size: 41px; } } @media (max-width: 767px) { .routine { background: none; padding: 100px 0 0; } .routine .content { text-align: center; width: 100%; } .routine .content h2 { color: #007e34; font-size: 48px; } .routine .content h2 span { font-size: 42px; } .routine .content .description { padding-left: 0; margin-left: auto; margin-right: auto; max-width: 475px; } .routine .content .description div, .routine .content .description p { color: #007e34; font-size: 20px; line-height: 32px; } .fr .routine .content h2 { font-size: 54px; } .fr .routine .content h2 span { font-size: 34px; } .fr .routine .content .description { max-width: 460px; } } @media screen and (max-width: 767px) and (max-width: 380px) { .fr.safari .routine .content h2 span { margin-left: -13px; } } @media (max-width: 479px) { .routine .content .description { max-width: 335px; } .routine .content .description div, .routine .content .description p { font-size: 14px !important; line-height: 24px; } .fr .routine .content .description { max-width: 330px; } } #search-popover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position: fixed; padding: 250px 5% 0 5%; height: 100%; width: 100%; left: 0; top: -25%; display: none; z-index: 7; overflow: auto; background: #CCE7DC; } #search-popover > .container { text-align: left; } #search-popover .view-more-button { display: none; text-align: center; margin-bottom: 50px; } #search-popover-input { font-size: 50px; height: 75px; background: transparent; width: 100%; margin-left: -100px; padding-left: 100px; color: #008752; border-bottom: solid 1px #008752; outline: none; } #search-popover-input::-webkit-input-placeholder { color: #008752; } #search-popover-input:-moz-placeholder { color: #008752; opacity: 1; } #search-popover-input::-moz-placeholder { color: #008752; opacity: 1; } #search-popover-input:-ms-input-placeholder { color: #008752; } #search-popover-input::-webkit-input-placeholder { padding-top: 2px; } #search-popover-input:focus::-webkit-input-placeholder { padding-top: 2px; } #search-popover #search-popover-btn { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 80px; height: 80px; float: right; position: relative; top: 0; background: #008752; cursor: pointer; } #search-popover #search-popover-btn i { background: transparent url("../img/gral/sprite.png") no-repeat scroll -80px -235px; background-size: 310px auto; display: block; height: 54px; left: 12px; position: absolute; top: 13px; width: 55px; } #search-popover #search-cnt { margin-top: 5px; text-align: center; } #search-popover #search-cnt > div { background-color: #2C2A2B; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0.2%; padding: 10px; font-size: 0.8em; color: #ffffff; text-align: center; vertical-align: top; border: solid 2px #D6CBB3; opacity: 0; display: inline-block; } #search-popover #search-cnt > div span { color: #E1DECE; display: block; font-size: 40px; margin-bottom: 5px; } #search-popover #search-cnt > div.active { background-color: #00833e; } #search-popover #results { text-align: center; padding-bottom: 30px; padding-top: 10px; } #search-popover #results > div { width: 25%; text-align: left; vertical-align: top; display: none; padding: 0 10px; } #search-popover #results > div h2 { margin: 0.5em 0; color: #00833e; font-size: 25px; text-transform: uppercase; } #search-popover #results ul { padding: 0; margin: 0; } #search-popover #results ul li { opacity: 0; list-style: none; } #search-popover #results ul li a { display: block; font-size: 0; height: 78px; position: relative; background-color: white; margin: 10px 0; } #search-popover #results ul li a span { width: 30%; height: 78px; display: inline-block; vertical-align: middle; background-position: center center; background-size: cover; background-repeat: no-repeat; } #search-popover #results ul li a h3 { -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate3d(0px, -50%, 0); -ms-transform: translate3d(0px, -50%, 0); -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); position: absolute; top: 50%; text-transform: none; margin: 0; width: 70%; color: #2C2A2B; font-size: 12px; line-height: 14px; padding-right: 40px; padding-left: 10px; display: inline-block; vertical-align: middle; height: auto; } #search-popover #results ul li a h3:after { -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate3d(0px, -50%, 0); -ms-transform: translate3d(0px, -50%, 0); -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; content: ''; width: 14px; height: 26px; background: transparent url("../img/gral/arrow.png") no-repeat 0 0; background-size: 100%; position: absolute; top: 50%; right: 12px; } #search-popover #results ul li a:hover h3:after, #search-popover #results ul li a:focus h3:after { right: 8px; } #search-popover #results-products ul li span { background-size: contain !important; } .loader-search { background: url("../img/gral/loader-big.gif") no-repeat center center; margin: 30px auto; width: 64px; height: 64px; } @media (min-width: 981px) and (max-width: 1024px) { #search-popover { padding-top: 200px; } #search-popover #results > div { width: 49%; } } @media (max-width: 980px) { #search-popover { padding-top: 160px; } #search-popover-input { font-size: 40px; } #search-popover #results > div { width: 49%; } } @media (max-width: 767px) { #search-popover { padding: 12% 3% 5% 3%; z-index: 14; } #search-popover > .container { margin-top: 10px; } #search-popover-input { font-size: 24px; padding: 25px 0 10px 80px; margin-left: -80px; height: auto; } #search-popover #search-popover-btn { width: 57px; height: 57px; } #search-popover #search-popover-btn i { background-position: -65px -179px; background-size: 230px auto; height: 37px; left: 13px; top: 12px; width: 37px; } #search-popover #search-cnt > div { font-size: 7px; width: 18%; max-height: 52px; } #search-popover #search-cnt > div span { font-size: 16px; } #search-popover #results { padding-bottom: 0; margin-bottom: -30px; } #search-popover #results > div { width: 100%; margin-bottom: 30px; } #search-popover .close-for-mobile { display: block; position: fixed; top: 5px; left: auto; right: 5px; width: 2.15em; background: #CCCCCC; color: #ffffff; height: 2em; text-align: center; line-height: 1.75; font-size: 14px; padding: 2px 0 0; border-radius: 3px; text-decoration: none; } #search-popover .close-for-mobile:hover, #search-popover .close-for-mobile:focus { background: #CA1010; } } .no-results { font-size: 38px; font-weight: bold; color: #999; margin: 30px 0; text-align: center; border-bottom: 1px solid #CCCCCC; padding-bottom: 30px; width: 100%; } .thumbnails.recipes > li { text-align: center; margin: 0.6%; } .thumbnails.recipes > li .thumbnail-body h4 { text-transform: initial; font-size: 18px; line-height: 1.2; margin-top: 25px; } .thumbnails { text-align: center; } .thumbnails > li { padding: 1px; width: 15%; margin: 0.8%; cursor: pointer; background: #ffffff; text-align: left; list-style: none; display: inline-block; } .thumbnails > li .img { height: 220px; display: block; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .thumbnails > li .thumbnail-body { height: 100px; padding: 0 10px 5px; text-align: center; position: relative; } .thumbnails > li .thumbnail-body h4 { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; padding: 0; margin: 0 auto 8px; line-height: 1.2; font-size: 18px; font-weight: normal; text-decoration: none; color: #00833e; width: 100%; text-transform: uppercase; text-align: center; letter-spacing: 0.2px; } .thumbnails > li .thumbnail-btn { margin-top: 10px; text-align: center; } .thumbnails > li a { text-decoration: none; outline: 0; } .fr .thumbnails > li .thumbnail-body { height: 90px; } .fr .thumbnails > li .thumbnail-body h4 { font-size: 14px; } .thumbnails > li .img-container { display: block; position: relative; overflow: hidden; } .thumbnails > li .img-container:before { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position: absolute; display: block; width: 74px; height: 74px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; content: ''; background: url("../img/gral/zoom.png") no-repeat center center; background-size: 80%; } .thumbnails > li .img-container:after { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; content: ''; display: block; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); } .thumbnails > li:hover .img-container:before, .thumbnails > li.hover .img-container:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .thumbnails > li:hover .img-container:after, .thumbnails > li.hover .img-container:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; width: 88px; height: 88px; background: rgba(255, 255, 255, 0.85); } .recipes > li .thumbnail-body { height: 105px; } .recipes > li .thumbnail-body h4 { height: 90px; color: #2C2A2B; } .recipes > li .thumbnail-body h4:hover { color: #00833e; } .recipes > li .votes { margin-top: 12px; } .products > li { width: 23%; margin: 3% 0.5% 0.5%; } .products > li .img-container { padding: 10px 10px 0px; } .products > li .img { background-size: contain; } .just-one .thumbnails > li { float: none; display: inline-block; } .hiddenopa { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } @media (min-width: 981px) and (max-width: 1024px) { .thumbnails > li { width: 32%; margin: 0.5%; } } @media (max-width: 980px) { .thumbnails > li { width: 36%; margin: 0.5%; } .thumbnails.recipes > li { width: 47%; margin: 10px 0; padding: 5px; } .thumbnails.recipes > li .thumbnail-body { height: 80px; } .thumbnails.recipes > li .thumbnail-body h4 { text-align: center; margin-top: 30px; } } @media (max-width: 767px) { .thumbnails > li { width: 45.6%; margin: 1.2%; } .thumbnails > li .img { height: 150px; } .thumbnails > li .thumbnail-body h4 { font-size: 14px; line-height: 1.2; } .fr .thumbnails > li .thumbnail-body { height: 100px; } .fr .thumbnails > li .thumbnail-body h4 { font-size: 14px; } } #related-videos { text-align: center; padding-top: 60px; } #related-videos.just-one li { float: none; display: inline-block; } #related-videos h3.title { display: none; } .videolist { width: 100%; display: inline-block; list-style-type: none; } .videolist li { margin-left: 1%; margin-right: 1%; float: left; margin-bottom: 5px; margin: 20px 0px; } .videolist li .video-wrapper { width: 57%; float: right; } .videolist li .videos-discription-wrapper { width: 40%; float: left; text-align: left; } .videolist li iframe { max-width: 100%; } .videolist li .see-video { width: 100%; display: block; position: relative; } .videolist li .see-video:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; content: ''; display: block; margin: 0 auto; position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; top: 50%; background: url(../img/gral/video-play.png) no-repeat -1px -2px; width: 91px; height: 91px; background-color: transparent; } .videolist li .see-video:hover:after, .videolist li .see-video:focus:after { background-color: #ffffff; } .videolist li .image-container { width: 100%; height: 390px; } .videolist li h3 { padding-bottom: 25px; line-height: 1.1; overflow: hidden; color: #00833e; } .videolist li p { color: #2C2A2B; font-size: 17px; margin-bottom: 40px; line-height: 1.2; } .videolist li .share-video { padding: 5px 10px; text-align: left; background: #ffffff; } .videolist li .share-video > a { color: #00833e; width: auto; text-decoration: none; height: auto; text-align: left; float: right; } .videolist li .share-video > a:first-child { float: left; text-indent: 0; } .videolist li .share-video > a p { font-size: 16px; display: inline-block; margin-bottom: 0; position: relative; top: -12px; } .videolist li .share-video > a i.icon { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 36px; height: 36px; } .videolist li .share-video > a i.icon.youtube { background: transparent url("/sites/quakeroats.ca/files/social-youtube.png") no-repeat 0 0; background-size: cover; top: 1px; } .videolist li .share-video > a i.icon.fb { background: transparent url("/sites/quakeroats.ca/files/social-facebook.png") no-repeat 0 0; background-size: cover; top: 1px; } .videolist li .share-video > a i.icon.twitter { background: transparent url("/sites/quakeroats.ca/files/social-twitter.png") no-repeat 0 0; background-size: cover; top: 1px; } .videolist li .share-video > a:hover i.icon, .videolist li .share-video > a:focus i.icon { background-color: #CCCCCC; } @media (max-width: 980px) { .video-wrapper iframe { height: 250px; } .videolist li { width: 48%; } .videolist li h3 { padding-bottom: 15px; } .videolist li p { margin-bottom: 30px; } .videolist li a .image-container { height: 250px; } .videolist li > a img { width: 100%; } } @media (max-width: 767px) { #related-videos { padding-bottom: 20px; } #related-videos .videolist li { width: 100%; display: none; } #related-videos .videolist li .video-wrapper, #related-videos .videolist li .videos-discription-wrapper { width: 100%; text-align: center; } #related-videos .videolist li .video-wrapper h3, #related-videos .videolist li .videos-discription-wrapper h3 { margin-top: 20px; } #related-videos .videolist li:first-child { display: block; } #related-videos .videolist li a .image-container { height: 200px; } #related-videos .videolist li .videoname { height: auto; } #related-videos .videolist li > p { height: auto; max-width: 100%; padding: 0 10px; } } .view-more a { display: inline-block; padding: 14px 40px 12px; margin-top: 30px; border: solid 2px #00833e; background: #ffffff; color: #00833e; font-size: 14px; font-weight: bold; text-decoration: none; border-radius: 30px; } .view-more a:after { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; content: ''; width: 11px; height: 18px; left: 12px; position: relative; display: inline-block; vertical-align: middle; background: transparent url("../img/gral/arrow.png") no-repeat 0 0; background-size: cover; top: -1px; } .view-more a:hover, .view-more a:focus { color: #ffffff; background: #00833e; } .view-more a:hover:after, .view-more a:focus:after { left: 16px; background: transparent url("../img/gral/arrow-white.png") no-repeat 0 0; background-size: cover; } .loader-view-more { background: url("../img/gral/loader.gif") no-repeat center center; height: 20px; margin: 30px auto; width: 220px; } /** PRINT **/ .just-print { display: none !important; } @media print { #print-recipe-image { max-height: 300px; } .just-print { display: block; } .top-header-container, #header-top, .scroll, footer { display: none; } .expandible { display: block !important; } .node-type-recipes #recipe-details-full .recipe-description-and-options ul { display: none; } .node-type-recipes #collections, .node-type-recipes #featured-in, .node-type-recipes #our-recipes { display: none; } } /** I18N **/ /** SHAME **/ /** MEDIA QUERIES **/