/* @media (min-width:320px) { smartphones, portrait iPhone, portrait 480x320 phones (Android) */ /*@media (min-width:480px) { smartphones, Android phones, landscape iPhone */ /*@media (min-width:600px) { portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ /*@media (min-width:800px) { tablet, landscape iPad, lo-res laptops ands desktops */ /*@media (min-width:1025px) { big landscape tablets, laptops, and desktops */ /*@media (min-width:1281px) { hi-res laptops and desktops */ * { box-sizing: border-box; } .margin-top { margin-top: 0px; } .margin-bottom { margin-bottom: 100px; } .center { text-align: center; font-size: 12px; color: darkgreen; font-family: 'menu'; font-weight: 100; margin: 0px; } .a-left { text-align: left; } .a-right { text-align: right;padding: 0 0 5px -120px; } /* Centered text */ .centered { position: absolute; top: 50%; left: 50%; max-width: 1280px; width: 100%; margin: 0 auto; transform: translate(-50%, -50%); color: white; text-align: center; } /* Top Centered text */ .top-centered { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #ffc423; text-align: center; width: 100%;} /* Top Centered text */ .top-centered-slider { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; width: 100%;} /* Top left text */ .top-left { font-size: 86px; line-height: 76px; position: absolute; top: 10%; left: 50px; text-align: left; color: white; font-family: 'menu'; text-transform: uppercase; z-index: 99; } /* Top right text */ .top-right { position: absolute; top: 20px; right: 50%; text-align: right;} /* Centered text */ .bottom-center { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 8; font-size: 8px; padding: 0px; width: 100%; } /* Bottom right text */ .bottom-right { position: absolute; bottom: 40px; right: 16px; text-align: right; font-size: 6px; padding: 0px; font-family: "Open Sans", sans-serif; color: white; z-index: 999; } /* Bottom left text */ .bottom-left { max-width: 1280px; width: 100%; position: absolute; bottom: 100px; left: 8%; text-align: left; font-size: 6px; font-family: "Open Sans", sans-serif; color: darkgreen; z-index: 999;} /* Bottom right text */ .bottom-right { position: absolute; bottom: 40px; right: 16px; text-align: right; font-size: 6px; padding: 0px; font-family: "Open Sans", sans-serif; color: white; z-index: 999; } .bottom-popup {position: absolute; bottom: 0px; left: -15%; text-align: left; font-size: 6px; font-family: "Open Sans", sans-serif; color: white; z-index: 99;} /* Preloader #fcd240*/ #demo-content { padding-top: 100px; z-index: 99999; } #content { margin: 0 auto; padding-bottom: 50px; width: 50%; max-width: 978px; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } /* Preloader #a1c93a */ #loader { display: block; position: relative; left: 0%; top: 30%; width: 100%; height: 100%; margin: 0; border: 0px solid yellow; z-index:1001; } #loader img { max-width: 380px; width: 100%; margin-bottom: 10px; } #loader-wrapper .loader-section { position:fixed; top: 0; width: 100%;height: 100%; background: url(../../bg-quemsomos.jpg); background-size: cover; background-position: bottom; z-index: 1000; } #loader-wrapper .loader-section.section-left { left:0; } #loader-wrapper .loader-section.section-right { right:0; } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { #loader { display: block; position: relative; left: 0%; top: 22%; width: 100%; height: 100%; margin: 0; border: 0px solid yellow; z-index:1001; } } /* Loaded Styles .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-100%); /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .progress { border-color: #aaa; border-radius: 0.8rem; border-style: solid; border-width: 0.15rem; -webkit-box-sizing: content-box; box-sizing: content-box; display: block; height: 0.4rem; width: 30%; position: relative; padding: 3px; background: rgba(255, 208, 64, 1); margin: 0 auto;} .progress__bar { border-radius: 0.4rem; display: block; height: 0.4rem; width: 0; -webkit-transition: 0.1s width ease; -o-transition: 0.1s width ease; transition: 0.1s width ease; background-color: rgb(43,194,83); background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } .progress_streampercent:after { content: attr(data-progress) "%"; font-size: 0.8rem; color: #000; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .progress_streamtext:after { content: attr(data-progresstext); color: #000; font-size: 0.8rem; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .animate > span:after { display: none; } @-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px;}} .sidebutton {position: fixed; top: 30%; right: -30px; width: 60px; background: #4e71a8; z-index: 99; color: green; font-family: menu; text-align: left; text-transform: uppercase; padding-top: 5px; padding-right: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-top-left-radius: 10px; border-bottom-left-radius: 10px; transform: rotate(-3deg) -webkit-box-shadow: 1px 2px 5px -2px #333; -moz-box-shadow: 1px 2px 5px -2px #333; box-shadow: 1px 2px 5px -2px #333; } /******************************************************************************************************************************************** banners-message */ #tabelas { max-width: 1280px; width: 100%; margin: 0 auto; color: green; background-image: url(../../images/slider/bg-oquefazemos.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; padding-top: 10px; text-align:center;} .section-tabelas wrapper {width:840px; text-align: center;} .section-tabelas {padding:70px 0 0 0px;} .section-tabelas h1 {font-size:20px;line-height:32px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0; text-align: center;} .container-col4 { font-size: 0; max-width: 90%; margin: 0 10%; } .container-col4 > div { margin-bottom: 10px; padding: 10px; font-size: 11px; display: inline-block; vertical-align: top; width: 25%; border: 0px solid red; box-sizing: border-box; text-align: center; } @media (max-width: 480px) { /*breakpoint*/ .container-col4 > div { display: block; width: 100%; height: 40px; }} .container-col5 { font-size: 0; max-width: 100%; margin: 0 20px; } .container-col5 > div { margin-bottom: 10px; padding: 10px; font-size: 11px; display: inline-block; vertical-align: top; width: 20%; border: 0px solid red; box-sizing: border-box; text-align: center; } @media (max-width: 480px) { /*breakpoint*/ .container-col5 > div { display: block; width: 100%; height: 40px; }} object { width: 12%; margin-bottom: -5px; margin-right: 10px; } @media (max-width: 480px) { object { width: 5%; margin-bottom: -5px; margin-right: 10px; }} .rwd-table { width: 100%; min-width: 300px; padding: 0px; margin: 0px 0 10px 0; } .rwd-table img { max-width: 80px; position: relative; margin-left: 41vw; min-width: 100%; } .rwd-table tr { font-size: 18px; border-top: 0px solid #ddd; border-bottom: 0px solid #ddd; } .rwd-table th { display: none; } .rwd-table td { display: block; font-weight: normal; color: green; padding: 10px 0;} .rwd-table td:first-child { font-size: 20px;padding-top: .5em; width: 5%; } .rwd-table td:last-child { padding-bottom: .5em; width: auto; } .rwd-table td:before { content: attr(data-th) " "; font-weight: normal; width: 100vw; display: inline-block; } .rwd-table span { font-size: 12px; display: block; font-weight: normal; color: green; padding: 5px 0;} .rwd-table th, .rwd-table td { text-align: center; } @media (min-width: 480px) { .rwd-table { width: 100%; min-width: 300px; padding: 20px 20px; margin: -20px 0; } .rwd-table img { max-width: 80px; margin-left: 0px; min-width: 100%; } .rwd-table td:before { display: none; } .rwd-table th, .rwd-table td { display: table-cell; padding: .25em .5em; text-align: center; } .rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; } .rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } .rwd-table th, .rwd-table td { padding: .05em 0 !important; }} .rwd-table th, .rwd-table td:before { color: green; font-size: 14px; font-family: "menu"; text-transform: uppercase; } /******************************************************************************************************************************************** section-produtos */ .thumbs { width: 70px; margin-bottom: 0px; height: auto; transition: all .5s ease-in-out; } .thumbs:hover { transform: scale(1.1); } #nutricional { max-width: 1280px; width: 100%; margin: 0 auto; background-image: url(../../bg-quemsomos.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } /* thumb-slider */ .outer-produtos{ position: relative; margin-top: 0px; width: 100%; height: 120px; border: 0px solid black; background-color: rgba(161, 201, 58, 1); z-index: 2; } .inner-produtos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; border: 0px solid white; padding: 20px 0 0 0; } .inner-produtos div { position: relative; display: inline-block; margin-right: 5px; } .inner-produtos a { margin-top: 5px; font-size: 16px; line-height: 20px; letter-spacing: .8px; font-family: 'menu', sans-serif; text-transform: uppercase; color: darkgreen; font-weight: 100; text-align: center; -webkit-transition: ease-in-out 300ms; -moz-transition: ease-in-out 300ms; -o-transition: ease-in-out 300ms; transition: ease-in-out 300ms; } .inner-produtos a:hover { color: rgba(255, 208, 64, 1); } @media (max-width: 780px) { .outer-produtos{ display: none; } /** mobile size **/} /**************************************************************************************************************** toggle & tabelas nutricionais /* slider */ .outer-slider { position: relative; margin: 0; width: 100%; height:100vh; z-index: 1; background-image: transparent; border: 0px solid black; } .inner-slider { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 280px 0; text-align: left; border: 0px solid white; } .inner-slider small { font-size: 12px; color: white; font-weight: 400; margin: 0px; } #table1 { display: block; } #table2, #table3, #table4, #table5, #table6, #table7, #table8, #table9, #table10, #table11, #table12, #table13, #table14, #table15, #table16, #table17, #table18, #table19, #table20, #table21, #table22 { display: none; } .produtos-left { float: left; width: 40%; height: auto; padding: 5% 0 0 10%; margin: 0; color:#54aa1c; border: 0px solid white; line-height: 20px; } .produtos-left h1 { font-size: 110px; line-height: 90px; } .produtos-left h2 { font-family: 'caracol', cursive; text-transform: none; font-size: 36px; line-height: 32px; color: rgba(161, 201, 58, 1); margin: 10px 0; } .produtos-small { font-size: 11px; line-height: 14px; text-align: left; color: white; margin-top: 0px; } .produtos-left table { width: 100%; } .produtos-right { float: right; width: 50%; height: auto; border: 0px solid white; } .produtos-right h1 { font-size: 110px; line-height: 90px; } .produtos-right h2 { font-family: 'caracol', cursive; text-transform: none; font-size: 36px; line-height: 32px; color: rgba(161, 201, 58, 1); margin: 10px 0; } .produtos-right img { width: 600px; margin-top: 100px; padding-right: 100px; } .produtos-right-alt { float: right; width: 50%; margin: 100px 0px 0 0; padding: 0; } .produtos-right-alt img { float: right; width: 500px; margin-top: -10%; margin-right: 150px;} /* NUTRICIONAL */ .left-valores { font-size: 14px; color: darkgreen; text-align: left; font-family: 'caracol', cursive; border: 0px solid black; } .right-valores { font-size: 12px; color: darkgreen; text-align: right; font-family: 'caracol', cursive; border: 0px solid black; } a:link.tabela-btn { width: 160px; line-height: 40px; display: block; text-align: center; font-size: 16px; font-family: 'menu', sans-serif; text-transform: uppercase; color: white; margin: 20px 0 0 0; padding: 0px; transition: all 0.5s ease-in-out; background: url(../../images/media/svg/back-btn.svg); z-index: 999;} a:link.tabela-btn:hover { color: #063107; } a:link.tabela-btn-bck { width: 160px; line-height: 40px; display: block; text-align: center; font-size: 16px; font-family: 'menu', sans-serif; text-transform: uppercase; color: white; margin: 20px 0 0; padding: 0 15px 0 0; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: url(../../images/media/svg/back-btn.svg); z-index: 999;} a:link.tabela-btn-bck:hover { color: #063107; } /* ###### #### */ .note-valores { text-align: justify; color: #333; width: 100%; padding: 50px 50px 0px 50px ; opacity: 0.8; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 1px 24px 5px 0px rgba(0,0,0,0.2); margin: 0;} /* @media 820px */ @media (max-width: 820px) { .outer-slider { height: 100vh; } .inner-slider { padding: 50px 0; } .produtos-left { float: none; width: auto; padding: 0 10%; } .produtos-left table { width: 50%; } .produtos-right { float: none; width: auto; } .produtos-right img { width: 400px; margin-top: 20px; padding-right: 0px; } .note-valores { padding: 50px 20px;}} /* @media 680px */ @media (max-width: 720px) { .outer-slider { height: 100vh; } .produtos-left table { width: 100%; } .produtos-left h1 { font-size: 72px; line-height: 68px; }} /* @media 480px */ @media (max-width: 480px) { .produtos-left { float: none; width: auto; padding: 0 10%; } .produtos-left h1 { font-size: 62px; line-height: 52px; } .produtos-right { float: none; width: auto; } .produtos-right img { width: 400px; float: right; }} /* Slider Arrows */ .slider-left { position: fixed; top: 55%; left: 2%; z-index: 99; width: 40px;} .slider-right { position: fixed; top: 55%; right: 2%; z-index: 99; width: 40px;} /* @media 990px */ @media (max-width: 480px) { .slider-left { position: fixed; top: 65%; left: 0%; } .slider-right { position: fixed; top: 65%; right: 0%; }} .cool-produtos { font-size: 11px; line-height:12px; font-family: 'caracol'; text-transform: none; color: #063107; opacity: 1; display: inline-block; z-index: 99; } .cool-produtos::after { content: ''; display: block; width: 100%; height: 2px; background: darkgreen;transition:ease 0.25s all; } .cool-tabelas { font-size: 11px; line-height:12px; font-family: 'caracol'; text-transform: none; color: #063107; opacity: 0.8; display: inline-block; z-index: 99; } .cool-tabelas::after { content: ''; display: block; width: 100%; height: 2px; background: darkgreen;transition:ease 0.25s all; } /* ###### #### */ .bottom-note { bottom: 0px; left: 0px; text-align: left; padding: 30px 0px; font-family: "caracol", sans-serif; color: #063107; opacity: 0.8; z-index: 9999; vertical-align: baseline; } .bottom-note img { position: absolute; vertical-align: baseline; width: 20px; height:auto; z-index: 999; } .products-note { position: absolute; width: 100%; height: 32px; bottom: 120px; right: 50px; text-align: right; line-height: 10px; padding: 0px; font-family: 'caracol', sans-serif; color: darkgreen; font-size: 10px; font-family: "Open Sans", sans-serif; z-index: 999; } .flaticon{ font-size: 10px; line-height: 14px; font-weight: 400; text-align: left;} @media (max-width: 820px) { .flaticon{ text-align: left;}} .bottom-social { position: absolute; width: 220px; height: 32px; bottom: 182px; right: 50px; text-align: right; font-size: 6px; padding: 5px 10px; font-family: 'caracol', sans-serif; color: white; z-index: 999; background-color: rgba(80,60,45,1); border-radius: 15px; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 1px 5px 15px 10px rgba(0,0,0,0.8); } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .bottom-social { height: 32px; bottom: 178px; right: 50px; }} /* ########################################## PRODUCTS ########################################## */ .pote {position: absolute; max-width: 70vh; right: 200px; bottom: 200px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -1;} @media screen and (max-width: 1280px) { .pote { width: 75vh; right: 150px; }} @media screen and (max-width: 1025px) { .pote { width: 80vh; right: 50px; }} @media screen and (max-width: 800px) { .pote { width: 80vh; right: 230px; }} @media screen and (max-width: 620px) { .pote { width: 50vh; right: 100px; }} .pote-second { position: absolute; max-width: 70vh; right: 50px; bottom: 220px; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -2; } @media screen and (max-width: 1280px) { .pote-second { right: 0px; }} @media screen and (max-width: 1025px) { .pote-second { right: 00px; }} @media screen and (max-width: 800px) { .pote-second { width: 80vh; right: 50px; }} @media screen and (max-width: 620px) { .pote-second { display: none;}} .pote-contacts {position: absolute; max-width: 65vh; right: 0px; bottom: 40px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -11;} @media screen and (max-width: 880px) { .pote-contacts { width: 75vh; z-index: -1; }} @media screen and (max-width: 580px) { .pote-contacts { width: 40vh; right: 20px; bottom: 50px; }} /* ###### #### */ .pote5kg {position: absolute; max-width: 48vh; right: 180px; bottom: 220px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -1;} @media screen and (max-width: 1280px) { .pote5kg { right: 150px; }} @media screen and (max-width: 1025px) { .pote5kg { right: 100px; }} @media screen and (max-width: 800px) { .pote5kg { max-width: 35vh; right: 200px; }} @media screen and (max-width: 620px) { .pote5kg { right: 20px; }} .pote5kg-second {position: absolute; max-width: 45vh; right: 380px; bottom: 230px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -2;} @media screen and (max-width: 1280px) { .pote5kg-second { right: 300px; }} @media screen and (max-width: 1025px) { .pote5kg-second { right: -80px; }} @media screen and (max-width: 800px) { .pote5kg-second { max-width: 32vh; right: 100px; }} @media screen and (max-width: 620px) { .pote5kg-second { display: none; }} /* ###### #### */ .package-circle {position: absolute; max-width: 100vh; right: 250px; bottom: 200px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -1; } @media screen and (max-width: 1280px) { .package-circle { width: 75vh; right: 100px; }} @media screen and (max-width: 1025px) { .package-circle { width: 75vh; right: 0px; }} @media screen and (max-width: 800px) { .package-circle { width: 90vh; right: 150px; }} @media screen and (max-width: 620px) { .package-circle { right: 0px; bottom: 100px; }} .package-circle-second { position: absolute; max-width: 70vh; right: -50px; bottom: 220px; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -2; } @media screen and (max-width: 1025px) { .package-circle-second { right: -50px; }} @media screen and (max-width: 800px) { .package-circle-second { right: 50px; }} @media screen and (max-width: 630px) { .package-circle-second { display: none; }} /* ###### #### */ .package { position: absolute; max-width: 60vh; right: 100px; bottom: 100px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -1; } @media screen and (max-width: 1280px) { .package { right: 150px; }} @media screen and (max-width: 1025px) { .package { right: 50px; bottom: 200px; }} @media screen and (max-width: 800px) { .package { max-width: 45vh; right: 150px; }} @media screen and (max-width: 620px) { .package { max-width: 40vh; right: 0px; }} .package-second {position: absolute; max-width: 55vh; right: 300px; bottom: 220px; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -2; } @media screen and (max-width: 1280px) { .package-second { right: 0px; }} @media screen and (max-width: 1025px) { .package-second { right: -50px; }} @media screen and (max-width: 800px) { .package-second { max-width: 40vh; right: 0px; }} @media screen and (max-width: 620px) { .package-second { display: none; }} /* ###### #### */ .products-bck-base-main {position: absolute; max-width: 100vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; right: 0px; bottom: 160px; z-index: -11;} /* ###### #### */ .products-bck {position: absolute; max-width: 70vh; right: -20px; bottom: 280px; margin: 0 auto; width: 100%; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); z-index: -9;} .products-bck-base {position: absolute; max-width: 60vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; right: 0px; bottom: 300px; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px);z-index: -11;} /* ###### #### */ .products {position: absolute; max-width: 80vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; right: 0px; bottom: 50px; z-index: 1;} .products-about {position: absolute; max-width: 80vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; right: -150px; bottom: 50px; z-index: 1;} .package-slider {position: absolute; right: 120px; min-width: 20px; max-width: 50vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: 2; bottom: 30px;} @media screen and (max-width: 880px) { .package-slider { width: 75vh; right: 50px; }} @media screen and (max-width: 420px) { .package-slider { width: 50vh; right: -50px; }} .package-slider-1 {position: absolute; right: 220px; min-width: 20px; max-width: 50vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: 1; bottom: 40px;} @media screen and (max-width: 880px) { .package-slider-1 { width: 75vh; right: 50px; z-index: -1; }} @media screen and (max-width: 420px) { .package-slider-1 { width: 50vh; right: -50px; }} .cool-about { font-size: 11px; line-height:12px; font-family: 'caracol'; text-transform: none; color: white; opacity: 1; display: inline-block; z-index: 99; } .cool-about::after { content: ''; display: block; width: 100%; height: 2px; background: white;transition:ease 0.25s all; } /* ########################################## PRODUCTS ########################################## */ .pote-about {position: absolute; max-width: 50vh; left: 50px; bottom: 00px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: 1;} @media screen and (max-width: 1280px) { .pote-about { width: 75vh; left: 150px; }} @media screen and (max-width: 1025px) { .pote-about { width: 80vh; left: 50px; }} @media screen and (max-width: 800px) { .pote-about { width: 80vh; left: 230px; }} @media screen and (max-width: 620px) { .pote-about { width: 50vh; left: 100px; }} .pote-second-about { position: absolute; max-width: 50vh; left: 150px; bottom: 120px; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: -2; } @media screen and (max-width: 1280px) { .pote-second-about { left: 0px; }} @media screen and (max-width: 1025px) { .pote-second-about { left: 00px; }} @media screen and (max-width: 800px) { .pote-second-about { width: 80vh; left: 50px; }} @media screen and (max-width: 620px) { .pote-second-about { display: none;}} .products-bck-base-main-about {position: absolute; max-width: 100vh; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; left: 0px; bottom: 60px; z-index: -11;} /* ###### #### */ .products-bck-about {position: absolute; max-width: 70vh; left: -20px; bottom: 180px; margin: 0 auto; width: 100%; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); z-index: -9;} .bottom-social-about { position: absolute; width: 220px; height: 35px; bottom: 80px; left: 520px; text-align: right; font-size: 6px; padding: 5px 10px; font-family: 'caracol', sans-serif; color: white; z-index: 999; background-color: rgba(80,60,45,1); border-radius: 15px; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 1px 5px 15px 10px rgba(0,0,0,0.8); z-index: -1; } .pote-map {position: absolute; max-width: 50vh; left: 0px; bottom: 120px; -webkit-transition: ease-in-out 800ms; transition: ease-in-out 800ms; z-index: 1;} @media (min-width: 780px) and (max-width: 1024px) and (orientation: landscape) { .pote-map { width: 40vh; left: -100px; bottom: -70px; }} /*************************************************************************************************************************************** ABOUT **/ #nutricionalabout { max-width: 1280px; width: 100%; margin: 0 auto; background-image: url(../../bg-quemsomos.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .outer-slider-about { position: relative; margin: 0px 0 0 0; width: 100%; height: 80vh; z-index: 1; background-image: transparent; border: 0px solid black; } .inner-slider-about { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 50px 0 0 0; text-align: left; border: 0px solid white; } /* @media 820px */ @media (max-width: 820px) { .outer-slider-about { height: 100vh; } .inner-slider-about { padding: 0px 0; }} .produtos-left-about { float: left; width: 40%; height: auto; padding: 0 0 0 10%; margin: 0; color: darkgreen; border: 0px solid white; line-height: 20px; } .produtos-left-about h1 { font-size: 110px; line-height: 90px; } .produtos-left-about h2 { font-family: 'caracol', cursive; text-transform: none; font-size: 36px; line-height: 32px; color: rgba(161, 201, 58, 1); margin: 10px 0; } .produtos-small { font-size: 11px; line-height: 14px; text-align: left; color: white; margin-top: 0px; } .produtos-left-about table { width: 100%; } .produtos-right-about { float: right; width: 50%; height: auto; border: 0px solid white; color: darkgreen;margin-top: 50px; padding: 50px; line-height: normal; } .produtos-right-about h1 { font-size: 110px; line-height: 90px; color: #54aa1c; } .produtos-right-about h2 { font-family: 'menu', cursive; text-transform: none; font-size: 36px; line-height: 32px; color: #54aa1c; margin: 10px 0; } .produtos-right-about img { width: 600px; margin-top: 100px; padding-right: 100px; } /* @media 820px */ @media (max-width: 820px) { .produtos-left-about { float: none; width: auto; padding: 0 10%; } .produtos-right-about { float: none; width: auto; } .produtos-right-about img { width: 400px; margin-top: 20px; padding-right: 0px; } } .about-small {font-size: 10px; line-height: 12px; text-align: center; color: darkgreen; padding: 50px; text-align: justify; } .about-group { max-width: 1280px; width: 100%; margin: 0 auto;content:""; display: table; clear: both; height: 100%; } .about-left { float: left; width: 50%; color:darkgreen; line-height: normal; padding: 0 50px; text-align: left; margin-bottom: 0px; } .about-left h2 { color: #54aa1c; text-align: left;} .about-right { float: right; width: 50%; color:darkgreen; line-height: normal; padding: 0 50px; text-align: left; } .about-right h2 { color: #54aa1c; text-align: left;} /* @media 820px */ @media (max-width: 820px) { .about-group { max-width: 1280px; width: 100%; margin: 0 auto;content:""; display: table; clear: both; height: auto; padding-top: 50px; } .about-left { padding: 0 50px; } .about-right {padding: 0 50px; }} /* ###### #### */ #about-top { background-color:none; background-repeat:no-repeat; background-position:bottom left; background-size:cover; position:relative; max-width: 1280px; width: 100%; margin: 0 auto; height:500px; z-index: 1; } #about-top .base { background:transparent url(../../bottom-pattern.png) no-repeat bottom right; background-size: auto; height:719px; position:absolute; left:0; bottom:0px; width: 100%; max-width: 1280px; margin: 0 auto;z-index:1; } #about-top .wrapper {height:100%;display:flex;align-items:center;position:relative;z-index:2;} .about-content {color: darkgreen; padding: 0px 80px; text-align: center;} .about-content h1 {color: darkgreen; font-size: 70px; padding: 0px 0 0; text-align: center; margin-bottom: 50px;} .cookies-content h2 {color: darkgreen; font-family: "caracol"; font-size: 22px; line-height: 22px; font-weight: bold; text-transform: none; padding: 20px 0 0; margin: 0;} .about-content p {margin: 0px;} .about-content a {color: darkgreen; text-decoration: underline; font-weight:bold; border-bottom: 1px;} .about-content a:hover {color: darkgreen; text-decoration: none; font-weight:bold;} .about-content img { border: 1px solid white; width: 100%; -webkit-filter: drop-shadow(5px 5px 5px #222 ); filter: drop-shadow(5px 5px 5px #222);} .group:after { content:""; display: table; clear: both; } @media screen and (max-width: 1025px) { .about-content {color: darkgreen; padding: 100px 40px; } .about-left, .about-right { float: none; width: auto; padding: 0 50px;} .about-right { float: none; width: auto; margin: 20px 0; }} /* ###### #### */ #home-bottom { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color:white; padding: 50px 0; background: url(../../images/slider/contacts-bck.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); -moz-box-shadow: 10px 50px 50px 10px rgba(0,0,0,0.6); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); margin-bottom: -58vh; height: 90%; } .home-small {font-size: 10px; line-height: 12px; text-align: center; color: auto; margin-top:0px; padding: 10px 50px; opacity: 0.7; } #home-bottom h1{ font-size: 70px; line-height: 72px; margin: 50px 0 20px 0px ; } @media screen and (max-width: 520px) { #home-bottom h1{ font-size: 50px; line-height: 48px; }} /* ###### #### */ #about-bottom { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color:white; padding: 50px 0; background: url(../../images/slider/contacts-bck.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); } #about-bottom h1{ font-size: 70px; line-height: 72px; margin: 20px 0 20px 0px ; } /* ###### #### */ #especialidades-bottom { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color:white; padding: 50px 0; background: url(../../images/slider/contacts-bck.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); -moz-box-shadow: 10px 50px 50px 10px rgba(0,0,0,0.6); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); margin-bottom: -58vh; height: 90%; } .especialidades-small {font-size: 10px; line-height: 12px; text-align: center; color: auto; margin-top:0px; padding: 10px 50px; opacity: 0.7; } #especialidades-bottom h1{ font-size: 70px; line-height: 72px; margin: 50px 0 20px 0px ; } @media screen and (max-width: 520px) { #especialidades-bottom h1{ font-size: 50px; line-height: 48px; }} /* ###### #### */ #contactos-bottom { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color: white; padding: 50px 20px; background: url(../../images/slider/contacts-bck.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); margin-bottom: -50vh; height: 100%; line-height: normal; } #contactos-bottom h1{ font-size: 62px; line-height: 72px; color: #54aa1c; margin: 20px 0 0 0; } .contactos-small {font-size: 10px; line-height: 12px; text-align: center; color: auto; padding: 50px 0; } @media screen and (max-width: 800px) { #contactos-bottom { margin-bottom: -45vh; } #contactos-bottom h1 { font-size: 48px; line-height: 48px; }} /* ##Device = Tablets, Ipads (landscape) */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { #contactos-bottom { margin-bottom: -45vh; height: 100vh;}} @media screen and (max-width: 520px) { #contactos-bottom { margin-bottom: -30vh; }} /* ###### #### */ #encontra-bottom { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color:white; padding: 50px 20px; background: url(../../images/slider/contacts-bck.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); -moz-box-shadow: 10px 50px 50px 10px rgba(0,0,0,0.6); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); margin-bottom: -55vh; height: 100vh; line-height: normal;} #encontra-bottom h1{ font-size: 62px; line-height: 72px; color: #54aa1c; margin: 20px 0 0 0; } .encontra-small {font-size: 10px; line-height: 12px; text-align: center; color: auto; margin-top:0px; padding: 10px 50px; opacity: 0.7; } @media screen and (max-width: 520px) { #encontra-bottom {margin-bottom: -55vh; }} /* ###### #### */ #about-meals { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color:white; padding:50px; background: url(../../images/banner-about-afabrica.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: transparent; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 0px 50px 50px 0px rgba(0,0,0,0.6); } #about-meals h1{ font-size: 70px; line-height: 72px; margin: 20px 0 20px 0px ; } /* #### #### */ #about-bot .base { background-size: cover; height:auto; position:absolute; bottom:0px; width: 100%; max-width: 1280px; margin: 0 auto; z-index:1; } #about-bot { background-color:#00863c; height:500px; padding:200px 20px 0px 20px; font-family: "caracol"; width: 100%; max-width: 1280px; margin: 0 auto; background: white url(../../bottom-pattern.png); background-repeat: no-repeat; background-size: cover; background-position: top right; z-index: 1; color: white;} #about-bot * {color:auto; } #about-bot h1 {color:#fff; font-size:42px;line-height:42px; font-family: "menu";} #contacts-bot h2 {color:#fff; font-size:42px;line-height:42px; font-family: "menu";} #about-bot .wrapper {display:flex;align-items:flex-start;flex-direction:row; width: 100%;} #about-bot .text {width:33.33%;} #about-bot .text * span {font-size:80px;line-height:16px;display:block; margin-top: -10px;} #about-bot .text-left { font-size:10px;line-height:13px; text-align: center; color:#fff; margin: 0;} #about-bot .text-left h3 {font-size:20px;line-height:32px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0;} #about-bot .text-center {font-size:10px; line-height:13px; color:#fff;} #contacts-bot .text-center h3 {font-size:20px;line-height:32px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0;} #about-bot .text-right p {font-size:15px;line-height:20px; font-family: "menu"; color:#fff; text-transform: none; font-weight:normal; margin-bottom:0;} #about-bot .text-right h2 { color:white;} #about-bot .text-right h3 {font-size:38px;line-height:40px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0; color:#dceb84;} #about-bot .text-right span {font-size:15px;line-height:20px; font-family: "menu"; color:#fff; text-transform: none; font-weight:normal; margin-top:120px;} /* ###### #### */ #contactos-bottom2 { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color: white; padding: 50px 20px; background: url(../../bg-quemsomos.jpg); background-position: top; background-size: cover; background-repeat: repeat; background-color: darkgreen; -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset 10px 50px 50px 10px rgba(0,0,0,0.6); margin-bottom: -60vh; height: 100%; line-height: normal; z-index: 99; } #about-bot2 { background-color:#00863c; height:10vh; padding:200px 20px 0px 20px; font-family: "caracol"; width: 100%; max-width: 1280px; margin: 0 auto; background: white url(../../bottom-pattern.png); background-repeat: no-repeat; background-size: cover; background-position: top right; z-index: 1; color: white;} /** **/ #section-gama {margin: 0 auto; max-width: 1280px; width: 100%; max-height: 500px; text-align: center; background: transparent url(../../images/slider/top-wood-layer.png); background-size: contain; background-position: bottom center; align-content: center; color: green; left: 0; padding-bottom: 50px; margin-top: 0px; padding-top: 30px; background-size:auto; background-repeat: no-repeat; } #section-gama h1 { font-size: 86px; line-height: 76px; color: darkgreen;} #section-gama img {position: relative; max-width: 200px; margin-top:80px; vertical-align: top;} #section-banner {margin: 0 auto; max-width: 1280px; width: 100%; max-height: 500px; text-align: center; background: transparent url(../../images/slider/top-wood-layer.png); background-size: contain; background-position: bottom center; align-content: center; color: green; left: 0; padding-bottom: 50px; margin-top: 0px; padding-top: 30px; background-size:auto; background-repeat: no-repeat; } #section-banner h1 { font-size: 86px; line-height: 76px; color: darkgreen;} #section-banner img {position: relative; max-width: 350px; margin-right: 40px; margin-bottom:20px; vertical-align: top; z-index: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 10px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } @media screen and (max-width: 680px) { #section-banner h1 { font-size: 52px; line-height: 38px; }} /******************************************************************************************************************************** MAIN THUMBS **/ figure.banner { font-family: 'menu'; position: relative; overflow: hidden; margin: 0 auto; height: auto; max-width: 1280px; background-size: cover; width: 100%; color: auto; text-align: auto; font-size: 16px; background-color: black; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 0px; z-index: 1; } figure.banner *, figure.banner *:before, figure.banner *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.15s ease; transition: all 0.55s ease; max-width: 1280px; } figure.banner img { width: 100%; backface-visibility: hidden; vertical-align: top; opacity: 0.7; max-width: 1280px; } figure.banner .sub-title { position: absolute; font-size: 3vh; line-height: 3vh; font-family: "menu"; text-transform: uppercase; color: white; top: 12%; left: 15px; text-align: left; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } figure.banner .title-especialidades { position: absolute; font-size: 62px; line-height: 56px; font-weight: 700; font-family: 'menu'; color: white; top: 22%; left: 15px; padding: 0px; text-align: left; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } figure.banner figcaption { position: absolute; bottom: 25%; left: 5%; text-align: left; opacity: 1; padding: 0px; font-size: 22px; font-weight: 500; letter-spacing: 1.5px; width: 100%; } figure.banner figcaption p { margin: 0; } figure.banner a { color: white; width: 100%; font-family: 'menu'; text-transform: uppercase; position: absolute; top: 0; bottom: 0; left: 0%; right: 0; z-index: 999; } figure.banner:hover img, figure.banner.hover img { zoom: 1; filter: alpha(opacity=55); -webkit-opacity: 0.9; opacity: 0.9;transform: scale(1.1); } figure.banner:hover .title:before, figure.banner.hover .title:before, figure.banner:hover .title:after, figure.banner.hover .title:after, figure.banner:hover .title div:before, figure.banner.hover .title div:before, figure.banner:hover .title div:after, figure.banner.hover .title div:after { -webkit-transform: translate(0, 0); transform: translate(0, 0); } figure.banner:hover .title:before, figure.banner.hover .title:before, figure.banner:hover .title:after, figure.banner.hover .title:after { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } figure.banner:hover figcaption, figure.banner.hover figcaption { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; transform: scale(1); /* transform: scale(1.1); */ } /* @media 720px */ @media (max-width: 780px) { figure.banner .sub-title { font-size: 3vh; line-height: 1vh; padding-bottom: 10px; } figure.banner .title-especialidades { font-size: 48px; line-height: 42px; }} /** **/ .legenda {position: fixed; z-index: 99; margin: 0; bottom: 50px;} .content-especialidades { top:50px;padding: 0; background-image: url(); height: 10vh; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: auto; max-width: 1280px; } .left-especialidades { float: left; width: 50%; background-color: #4768ac; background-size: cover; background-position: left; text-align: left; color: rgba(255, 255, 255, 1); } .right-especialidades { float: right; width: 50%; background-size: cover; color: rgba(255, 255, 255, 1);} .group { max-width: 1280px; width: 100%; margin: 0 auto;content:""; display: table; clear: both; height: auto; padding-bottom: 0px; } .group th{ width: 38px; padding-top: 10px; } .container-especialidades { font-size: 0; } .container-especialidades > div { font-size: 16px; display: inline-block; width: 33.33%; border: 0px solid red; text-align: center; } @media (max-width: 900px) { .container-especialidades > div { display: inline-block; width: 50%; }} @media (max-width: 580px) { .left-especialidades, .right-especialidades { float: none; width: 100%; }} /*********************************************************************************************************************************** SCROLL UP **/ /* scrolltop background: rgba(243,255,0,1.0); */ .scrolltop { display: none; width: 100%; margin: 0 auto; position: fixed; bottom: 0px; right: 0px; z-index: 99; } .scroll { position: absolute; left: 4%; bottom: 0px; background: url(../../images/media/svg/back-btn.svg); opacity: 0.6; padding: 15px; text-align: center; margin: 0 0 0 0; cursor: pointer; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } .scroll:hover { background: url(../../images/media/svg/back-btn.svg); opacity: 1; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } .scroll:hover .fa { padding-top: 0px;} .scroll .fa { font-size: 30px; margin-top: 0px; margin-left: 0px; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } /************************************************************************************************************************************* POP UP **/ .FixedHeightContainer { float: right; height: 100%; width:100%; padding:0 20px; background: none; } .Content { height: 300px; overflow:auto; background: none; border-top: 1px solid darkgreen; } .Content h1 {color: darkgreen; font-size: 62px; padding: 0;} @media screen and (max-width: 800px) { .FixedHeightContainer { padding:00px; }} .popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.5); z-index: 99; text-align: center;} .popup-inner { position:absolute; max-width:700px; width:80%; padding:40px 20px; top: 50%; left:50%; color: darkgreen; font-size: 10px; line-height: normal; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); border-radius:3px; background:rgba(255, 208, 64, 1); box-shadow:0px 2px 6px rgba(0,0,0,1); opacity: 1; } .popup-inner span img{display: inline-block; width: 80px} .popup-inner h1 { font-size:42px; line-height:40px; font-weight: lighter; color: darkgreen; margin-bottom: 10px; } .popup-inner h2 { font-size:22px; line-height:20px; color: darkgreen; font-family: 'caracol', cursive; text-transform: none; margin: 5px 0; } .popup-inner .small { font-size: 11px; line-height:12px; color: darkgreen; font-family: 'caracol', cursive; font-weight: bold; text-transform: none; text-align: left; } .popup-inner a { color: darkgreen; background: #a1c93a; border: 2px solid white; } .popup-inner a:hover { color: #a1c93a; background: #06723b;} /* Close Button */ .popup-close { width:30px; height:30px; padding-top:2px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; color: black; } /*.popup-close:hover /* { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none; }*/ .bottom-popup { display:inline-block; position:fixed; bottom:-300px; right:-100px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); z-index: 99;} .popup ul, li {display: inline-block; padding-right: 20px; } .popup img {width: 400px; margin-bottom: -20px; } .popup-inner a.class1 { color: darkgreen; background: none; border: 0px solid white; } .popup-inner a.class1:hover { color: #a1c93a;;} @media screen and (max-width: 800px) { .popup img { bottom: -300px; left: -200px; } .bottom-popup { bottom: -320px; right: 300px; }} /************************************************************************************************************************************ COOKIES **/ .cookies-content {color: darkgreen; padding: 20px; text-align: left;} .cookies-content h1 {color: darkgreen; font-size: 62px; padding: 0px 0 0;} .cookies-content h2 {color: darkgreen; font-family: "caracol"; font-size: 22px; line-height: 22px; font-weight: bold; text-transform: none; padding: 20px 0 0; margin: 0;} .cookies-content p {margin: 0px;} @media screen and (max-width: 1310px) { #wrapper-cookie { max-width: 1280px; width: 100%; margin: 0px auto; border: 0px solid #333; padding: 50px 20px; background: rgba(0, 0, 0, 0); } #wrapper-cookie h2 { font-size: 40px; line-height:43px; text-transform: uppercase; font-weight: normal; color: darkgreen; }} #content-cookie { background: transparent; text-align: center; font-size: 16px; line-height:20px; font-family: 'cookies'; text-transform: none; color: darkgreen; padding: 0 0px;} .barra-aceptacion-cookie { background: rgb(255, 208, 64); border-top: 4px solid darkgreen; box-sizing: border-box; position: fixed; bottom: 0; padding: .5em 1em; width: 100%; z-index: 999; height: auto; } @media screen and (max-width: 800px) { .cookies-content { padding: 50px 40px; text-align: left;}} @media screen and (max-width: 480px) { .barra-aceptacion-cookie { display: none !important; } .cookies-content { padding: 50px 20px; }} #js_btn_cookie {background: none; font-size: 26px; line-height:16px; font-family: 'cookies'; font-weight:700; color: darkgreen; position: absolute; top: 20px; right: 16px; text-align: center; } .cool-link { font-size: 16px; line-height:20px; font-family: 'cookies'; text-transform: none; color: darkgreen; display: inline-block; } .cool-link::after { content: ''; display: block; width: 100%; height: 2px; background: darkgreen;transition:ease 0.25s all; }