/*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .mceContentBody { padding:20px !important; } .mceContentBody { overflow:auto !important; } .mceContentBody strong { font-weight:600 !important; } .clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } html, body, form {width: 100%;} html {height: 100%; box-sizing: border-box;} body {font-size: 20px; font-family: 'Encode Sans Expanded', sans-serif; background: white; overflow-y: auto; overflow-x: hidden;} @media screen and (max-width: 1200px) {body {font-size: 19px;}} @media screen and (max-width: 1100px) {body {font-size: 18px;}} @media screen and (max-width: 1000px) {body {font-size: 17px;}} @media screen and (max-width: 900px) {body {font-size: 16px;}} @media screen and (max-width: 800px) {body {font-size: 15px;}} @media screen and (max-width: 700px) {body {font-size: 14px;}} @media screen and (max-width: 600px) {body {font-size: 13px;}} @media screen and (max-width: 500px) {body {font-size: 12px;}} @media screen and (max-width: 400px) {body {font-size: 11px;}} body.hidden {overflow-y: hidden;} .wrapper {display: block; width: 90%; max-width: 1200px; margin: 0 auto;} .wrapper2 {display: block; width: 90%; max-width: 768px; margin: 0 auto;} #top {display: block; width: 100%; height: 70px; padding: 0 5%; background: URL('images/wood.jpg') no-repeat center center; background-size: 100% 100%; box-sizing: border-box;} #top .inner {display: block; width: 100%; height: 100%; position: relative;} #top .logo {display: none;} #top #navicon {display: none;} #top .social {display: flex; height: auto; position: absolute; left: 25px; top: calc(50% - 15px);} #top .social a {display: block; width: auto; height: 30px; margin-right: 4px;} #top .social a img {display: block; width: auto; height: 100%;} #top .social #cross {display: none;} #top .lang {display: flex; align-items: center; height: 50%; padding: 12px; background: rgba(0,0,0,0.5); box-sizing: border-box; position: absolute; right: 0; top: 25%; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #top .lang:hover {background: black;} #top .lang a {display: flex; width: auto; height: 100%; align-items: center; margin-right: 13px; font-size: 13px; color: white; font-weight: 600; opacity: 0.5; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #top .lang a:last-child {margin-right: 0;} #top .lang a:hover, #top .lang a.sel {opacity: 1;} #top .lang a img {display: block; width: auto; height: 100%; margin-right: 5px;} #header {display: flex; width: 100%; height: 42px; justify-content: center; position: relative; z-index: 999; box-sizing: border-box; background: #4baf84;} #header .logo {display: block; width: 190px; height: auto; position: absolute; left: calc(50% - 95px); top: -100px; z-index: 5000;} #header .logo img {display: block; width: 100%; height: auto;} #header nav {display: flex; width: 100%; height: 100%; justify-content: space-between; z-index: 500; padding: 0px 20px; box-sizing: border-box;} #header nav > ul {display: flex; width: calc(50% - 95px); height: 100%;} #header nav > ul:first-of-type {justify-content: flex-end;} #header nav > ul > li {display: block; width: auto; height: 100%;} #header nav > ul > li > a {display: flex; width: auto; height: 100%; align-items: center; color: white; padding: 0px 17px; font-size: 12px; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); text-transform: uppercase; font-weight: 600; text-align: center; position: relative; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #header nav > ul > li > a:hover, #header nav > ul > li.sel > a {background: #439874;} @media screen and (max-width: 1280px) { #top {height: 64px;} #top .lang {height: 42%; padding: 8px; top: 24%;} #top .lang a {margin-right: 11px; font-size: 12px;} #header {height: 36px;} #header .logo {width: 170px; left: calc(50% - 85px); top: -95px;} #header nav > ul {width: calc(50% - 85px);} #header nav > ul > li > a {padding: 0px 13px; font-size: 11px;} } @media screen and (max-width: 1080px) { #top .logo {display: block; width: 120px; height: auto; position: absolute; left: calc(50% - 60px); top: -20px; z-index: 100;} #top .logo img {display: block; width: 100%; height: auto;} #top #navicon {display: flex; width: auto; height: auto; align-items: center; color: white; font-size: 14px; font-weight: 600; background: rgba(0,0,0,0.7); padding: 5px 8px 5px 5px; box-sizing: border-box; position: absolute; left: 0px; top: 15px; cursor: pointer;} #top #navicon span {opacity: 1; display: block; width: 24px; height: 24px; background: URL('images/navicon.svg') no-repeat center top; background-size: 100% 200%; margin-right: 4px; cursor: pointer;} #top #navicon:hover span {background-position: center bottom;} #top .social {width: 280px; height: 100px; background: #f7f7f7; padding: 46px 20px 20px; border-right: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position: fixed; top: 0px; left: -300px; z-index: 1000; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} #top .social.show {left: 0px;} #top .social #cross {display: block; width: 16px; height: 16px; opacity: 0.3; position: absolute; right: 20px; top: 20px; background: URL('images/cross.svg') no-repeat center top; background-size: 100% 100%; cursor: pointer;} #top .social #cross:hover {opacity: 0.8;} #top .lang {height: 38%; top: 31%;} #top .lang a {margin-right: 10px; font-size: 11px;} #header {display: block; width: 280px; height: calc(100% - 100px); position: fixed; left: -300px; top: 100px; overflow: auto; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} #header.show {left: 0px;} #header .logo {display: none;} #header nav {display: block; height: auto; padding: 0px;} #header nav > ul {display: block; width: 100%; height: auto;} #header nav > ul > li {width: 100%; height: auto;} #header nav > ul > li > a {display: block; width: 100%; height: auto; padding: 20px; font-size: 12px; text-align: left; box-sizing: border-box;} } /*--FOOTER---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #footer {display: block; width: 100%; padding: 50px 0; background: #4baf84;} #footer .files {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} #footer .files a {display: block; text-align: center; font-size: 15px; font-weight: 600; color: #0a5b38; margin: 10px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #footer .files a:hover {color: white;} #footer .social {display: flex; width: 100%; justify-content: center; margin: 20px 0;} #footer .social a {display: block; width: 40px; height: 40px; margin: 0 5px; background-repeat: no-repeat; background-size: 100% 200%; background-position: center top;} #footer .social a.fb {background-image: URL('images/icon-facebook2.png');} #footer .social a.ta {background-image: URL('images/icon-tripadvisor2.png');} #footer .social a.bo {background-image: URL('images/icon-booking2.png');} #footer .social a:hover {background-position: center bottom;} #footer p.copyright {color: #0a5b38; font-size: 14px; text-align: center; font-weight: 600; text-shadow: none;} #footer p.copyright a {color: #0a5b38; margin-left: 3px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #footer p.copyright a:hover {color: white;} @media screen and (max-width: 740px) { #footer .files a {font-size: 14px;} } strong {font-weight: 700;} em {font-style: italic;} .section {display: block; width: 100%; height: auto; padding: 7rem 0; background: white;} .section.green {background: #4baf84;} .section h1 {display: block; width: 100%; text-align: center; font-size: 42px; font-weight: 700; color: #4baf84; text-transform: uppercase; margin-bottom: 40px; position: relative;} .section h1 span {display: inline-block; padding: 0 15px; background: white; box-sizing: border-box; position: relative; z-index: 1;} .section h1:before {display: block; width: 100%; height: 1px; background: black; position: absolute; left: 0; top: 50%; z-index: 0; opacity: 0.3; content: "";} .section h2 {display: block; width: 100%; text-align: center; font-size: 26px; font-weight: 700; color: black; margin: 50px 0 25px;} .section h3 {display: block; width: 100%; text-align: center; font-size: 21px; font-weight: 700; color: #4baf84; margin: 30px 0 20px;} .section h4 {display: block; width: 100%; text-align: left; font-size: 16px; font-weight: 700; color: black; margin: 25px 0 4px;} .section.green h2 {color: white;} .section p {margin-bottom: 30px;} .section p, .section ul li {display: block; width: 100%; color: black; text-align: justify; line-height: 1.8em; font-size: 15px; font-weight: 400; box-sizing: border-box;} .section p a, .section ul li a {color: #4baf84; text-decoration: underline;} .section p a:hover, .section ul li a:hover {text-decoration: none;} .section ul {text-align: left; margin-bottom: 15px;} .section ul li {text-align: left; padding-left: 32px; position: relative; box-sizing: border-box;} .section ul li:before {display: block; font-size: 20px; position: absolute; top: -1px; left: 20px; color: #4baf84; content: "• ";} @media screen and (max-width: 1280px) { .section {padding: 6rem 0;} .section h1 {font-size: 36px; margin-bottom: 45px;} .section h2 {font-size: 24px;} .section h3 {font-size: 19px;} } @media screen and (max-width: 960px) { .section {padding: 5rem 0;} .section h1 {font-size: 32px; margin-bottom: 40px;} .section h2 {font-size: 22px; margin: 45px 0 21px;} .section h3 {font-size: 17px; margin: 25px 0 16px;} .section h4 {font-size: 15px; margin: 20px 0 3px;} .section p, .section ul li {font-size: 14px;} .section p {margin-bottom: 25px;} } @media screen and (max-width: 640px) { .section {padding: 4rem 0;} .section h1 {font-size: 27px; margin-bottom: 35px;} .section h2 {font-size: 20px; margin: 40px 0 17px;} .section h3 {font-size: 15px; margin: 20px 0 12px;} .section h4 {font-size: 14px; margin: 15px 0 2px;} .section p {margin-bottom: 22px;} .section p, .section ul li {font-size: 13px;} } @media screen and (max-width: 540px) { .section p, .section ul li {font-size: 12px;} } .button {display: block; width: 200px; height: auto; padding: 11px 24px; background: #4baf84; color: white; font-size: 12px; font-weight: 600; text-transform: uppercase; outline: none; text-align: center; box-sizing: border-box; margin: 0 auto; font-family: 'Encode Sans Expanded', sans-serif; cursor: pointer; position: relative; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .button:hover {background: #3da176;} .button.border {color: #989898; border: solid 1px #989898; background: none;} .button.border:hover {background: #4baf84; color: white;} .section.green .button.border {border-color: white; color: white;} .section.green .button.border:hover {border-color: white; color: #4baf84; background: white;} @media screen and (max-width: 1280px) { .button {width: 180px; font-size: 11px;} } @media screen and (max-width: 960px) { .button {width: 160px; font-size: 10px;} } @media screen and (max-width: 640px) { .button {width: 150px; font-size: 9px;} } /*--PAGINATION---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pagination {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 80px;} .pagination a {display: block; color: #4baf84; font-size: 16px; font-weight: 600; padding: 4px 8px; margin: 0 1px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .pagination a:hover {color: black;} .pagination a.active {background: #4baf84; color: white;} @media screen and (max-width: 768px) { .pagination a {font-size: 15px;} } @media screen and (max-width: 480px) { .pagination a {font-size: 14px;} } /*--HOMEPAGE---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .hp-slider {display: block; width: 100%; height: 600px; position: relative;} .hp-slider h1 {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; text-align: center; color: white; font-size: 65px; font-weight: 400; text-shadow: 0px 0px 5px rgba(0,0,0,0.3); padding: 20px; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2; margin: 0;} .hp-slider h1 span {display: block; width: 100%; font-size: 0.9em; font-weight: 600;} .hp-slider:after {display: block; width: 100%; height: 100%; background: URL('images/slider-mask.png') no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} .hp-slider .slides {display: block; width: 100%; height: 100%;} .hp-slider .swiper-slide {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .hp-slider .swiper-slide.sl1 {background-image: URL('images/slide1.jpg');} .hp-slider .swiper-slide.sl2 {background-image: URL('images/slide2.jpg');} .hp-slider .swiper-slide.sl3 {background-image: URL('images/slide3.jpg');} @media screen and (max-width: 1280px) { .hp-slider {height: 540px;} .hp-slider h1 {font-size: 55px;} } @media screen and (max-width: 1080px) { .hp-slider {height: 500px;} .hp-slider h1 {font-size: 45px;} } @media screen and (max-width: 768px) { .hp-slider h1 {font-size: 40px;} } @media screen and (max-width: 640px) { .hp-slider h1 {font-size: 35px;} } @media screen and (max-width: 540px) { .hp-slider h1 {font-size: 30px;} } .hp-contact {display: flex; width: 100%; height: 50px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; top: -25px; z-index: 5;} .hp-contact a {display: flex; align-items: center; height: 100%; color: white; font-size: 16px; font-weight: 600; background: #4baf84; padding: 4px 18px; margin: 2px; border-radius: 25px; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word;} .hp-contact a img {display: block; width: auto; height: 50px; margin-right: 8px;} .hp-contact a:hover {-ms-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);} @media screen and (max-width: 1280px) { .hp-contact {height: 46px; top: -23px;} .hp-contact a {font-size: 15px; padding: 4px 16px; border-radius: 23px;} .hp-contact a img {height: 46px;} } @media screen and (max-width: 960px) { .hp-contact {height: 42px; top: -21px;} .hp-contact a {font-size: 14px; padding: 4px 15px; border-radius: 21px;} .hp-contact a img {height: 42px;} } @media screen and (max-width: 640px) { .hp-contact {height: 38px; top: -19px;} .hp-contact a {font-size: 13px; padding: 4px 14px; border-radius: 19px;} .hp-contact a img {height: 38px;} } @media screen and (max-width: 540px) { .hp-contact {height: 34px; top: -17px;} .hp-contact a {font-size: 12px; padding: 4px 12px; border-radius: 17px;} .hp-contact a.tel { min-width:170px; } .hp-contact a.email { min-width:240px; } .hp-contact a img {height: 34px;} } .about-info {display: block; width: 100%; text-align: center;} .about-info h2 {margin: 35px 0 15px; font-size: 28px; color: #4baf84; font-weight: 300;} .about-info p {text-align: center;} .about-info ul {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} .about-info ul li {display: block; width: auto; font-size: 27px; padding-left: 30px; margin-left: 30px; text-align: center;} .about-info ul li:before {content: ""; height: 90%; width: 1px; background: black; opacity: 0.1; left: 0; top: 10%;} .about-info ul li:first-child {padding-left: 0; margin-left: 0;} .about-info ul li:first-child:before {display: none;} .about-info ul li span {color: #4baf84; font-weight: 700;} @media screen and (max-width: 1280px) { .about-info h2 {font-size: 25px;} .about-info ul li {font-size: 24px; padding-left: 24px; margin-left: 24px;} } @media screen and (max-width: 1080px) { .about-info h2 {font-size: 22px;} .about-info ul li {font-size: 20px; padding-left: 20px; margin-left: 20px;} } @media screen and (max-width: 768px) { .about-info h2 {font-size: 20px;} .about-info ul li {font-size: 18px; padding-left: 14px; margin-left: 14px;} } @media screen and (max-width: 480px) { .about-info ul li {font-size: 18px; padding-left: 20px; margin-left: 20px; margin-top: 3px; margin-bottom: 3px;} .about-info ul li:last-child {width: 100%; padding-left: 0; margin-left: 0;} .about-info ul li:last-child:before {display: none;} } .infographics h2 {margin-bottom: 60px;} .infographics .items {display: flex; width: 768px; justify-content: center; flex-wrap: wrap; margin: 0 auto 50px;} .infographics .items p {display: flex; width: calc(20% - 4px); justify-content: center; align-items: flex-end; margin: 2px; text-align: center; font-size: 13px; line-height: 1.3em; font-weight: 700; color: black; background: white; padding: 70px 10px 30px; border-radius: 4px; position: relative;} .infographics .items p img {display: block; width: 46%; position: absolute; top: -12px; left: 27%;} @media screen and (max-width: 1080px) { .infographics .items {width: 580px; margin-bottom: 44px;} .infographics .items p {font-size: 10px; padding: 46px 8px 18px; border-radius: 3px;} .infographics .items p img {width: 46%; top: -12px; left: 27%;} } @media screen and (max-width: 768px) { .infographics h2 {margin-bottom: 50px;} .infographics .items {width: 480px; margin-bottom: 40px;} .infographics .items p {width: calc(25% - 4px);} } @media screen and (max-width: 540px) { .infographics .items {width: 240px;} .infographics .items p {width: calc(50% - 4px);} } .hp-gallery {display: block; height: auto; overflow: hidden; position: relative;} .hp-gallery .swiper-slide {display: block; width: auto; height: auto; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .hp-gallery .swiper-slide img {display: block; width: auto; height: 400px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .hp-gallery .swiper-slide:hover img {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .hp-gallery .swiper-button-prev, .hp-gallery .swiper-button-next {display: block; opacity: 0.8; position: absolute; top: calc(50% - 17px); width: 34px; height: 34px; z-index: 500; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .hp-gallery .swiper-button-prev {left: -40px; background-image: URL('images/arrow-l.svg');} .hp-gallery .swiper-button-next {right: -40px; background-image: URL('images/arrow-r.svg');} .hp-gallery:hover .swiper-button-prev {left: 10px;} .hp-gallery:hover .swiper-button-next {right: 10px;} .hp-gallery .swiper-button-prev:hover, .hp-gallery .swiper-button-next:hover {opacity: 1;} @media screen and (max-width: 1280px) { .hp-gallery .swiper-slide img {height: 360px;} } @media screen and (max-width: 960px) { .hp-gallery .swiper-slide img {height: 320px;} } .news .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;} .news article {display: block; width: calc(50% - 20px); text-align: left; margin-bottom: 40px;} .hp .news article {margin-bottom: 0;} .news article h2 {display: block; width: 100%; margin: 25px 0 10px; text-align: left;} .news article h2 a {display: inline-block; font-size: 22px; color: #4baf84; font-weight: 700; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .news article h2 a:hover {color: black;} .news article p {display: block; font-size: 14px; color: #5e5e5e; font-weight: 300; text-align: justify; line-height: 1.6em;} .news article p .date {display: inline-block; color: black; font-weight: 600; margin-right: 8px;} .news article .button-text {display: inline-block; font-size: 11px; color: #4baf84; font-weight: 600; float: right; margin-top: 15px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .news article .button-text:hover {color: black;} @media screen and (max-width: 1080px) { .news article {width: calc(50% - 15px); margin-bottom: 36px;} .news article h2 {margin: 20px 0 6px;} .news article h2 a {font-size: 19px;} .news article p {font-size: 14px;} } @media screen and (min-width: 768px) { .hp .news article {margin-bottom: 0;} } @media screen and (max-width: 768px) { .news article h2 a {font-size: 18px;} .news article p {font-size: 13px;} } @media screen and (max-width: 640px) { .news article {width: 100%; margin-bottom: 32px;} .news article:last-child {margin-bottom: 0px;} } .partners {display: block; width: 100%; padding: 40px 0;} .partners .wrapper {display: flex; justify-content: center; flex-wrap: wrap;} .partners .wrapper a {display: block; height: 40px; margin: 10px;} .partners .wrapper a img {display: block; height: 100%;} @media screen and (max-width: 1080px) { .partners .wrapper a {height: 32px; margin: 8px;} } @media screen and (max-width: 768px) { .partners .wrapper a {height: 28px; margin: 6px;} } /*--PG ABOUT---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-about .about-info {margin-bottom: 4rem;} /*--PG ABOUT---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-pricelist table {width: 100%; font-size: 14px; color: black; font-weight: 300; margin-bottom: 30px;} .pg-pricelist table th, .pg-pricelist table td {text-align: center; padding: 13px 0; border-bottom: solid 1px rgba(0,0,0,0.1);} .pg-pricelist table th {font-size: 16px; font-weight: 700; color: #4baf84;} .pg-pricelist table th span {display: block; font-size: 0.7em; color: black; margin-top: 2px;} .pg-pricelist table th:first-child {text-align: left; color: black;} .pg-pricelist table td:first-child {text-align: left;} .pg-pricelist table td.subheading {font-weight: 700; padding-top: 30px;} .pg-pricelist table.t2 td:first-child {text-align: left; width: 340px;} @media screen and (max-width: 1080px) { .pg-pricelist table {font-size: 13px;} .pg-pricelist table th {font-size: 14px;} .pg-pricelist table.t2 td:first-child {width: 300px;} } @media screen and (max-width: 768px) { .pg-pricelist table {font-size: 12px;} .pg-pricelist table th {font-size: 13px;} .pg-pricelist table.t2 td:first-child {width: 260px;} } @media screen and (max-width: 640px) { .pg-pricelist table {font-size: 11px;} .pg-pricelist table th {font-size: 12px;} .pg-pricelist table.t2 td:first-child {width: 230px;} } @media screen and (max-width: 640px) { .pg-pricelist table.t2 td:first-child {width: auto;} .pg-pricelist table.t2 td:nth-child(2) {padding-left: 10px; padding-right: 10px;} .pg-pricelist table.t2 td {text-align: left;} } /*--PG SERVICES---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-services .partner {display: block; height: 30px; margin: -5px 0 20px;} .pg-services .partner img {display: block; height: 100%;} .pg-services .links {display: block; margin: 15px 0;} .pg-services .links p {font-size: 16px; font-weight: 600; text-align: left;} @media screen and (max-width: 1080px) { .pg-services .partner {height: 25px;} .pg-services .links p {font-size: 15px;} } @media screen and (max-width: 768px) { .pg-services .partner {height: 20px;} .pg-services .links p {font-size: 14px;} } @media screen and (max-width: 640px) { .pg-services .links p {font-size: 13px;} } /*--PG-GALLERY---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .gallery {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;} .gallery .item {display: block; width: calc(50% - 4px); margin-bottom: 8px; position: relative; overflow: hidden;} .gallery .item img {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .gallery .item img:after {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; content: ""; background: URL("images/album-mask.png") no-repeat center center; background-size: 100% 100%;} .gallery .item h2 {display: flex; width: 100%; height: 100%; justify-content: flex-start; align-items: flex-end; font-size: 26px; color: white; font-weight: 700; margin: 0; padding: 25px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 3;} .gallery .item a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4;} .gallery .item:hover img {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} @media screen and (max-width: 960px) { .gallery .item {width: calc(50% - 3px); margin-bottom: 6px;} .gallery .item h2 {font-size: 23px; padding: 22px;} } @media screen and (max-width: 768px) { .gallery .item {width: calc(50% - 2px); margin-bottom: 4px;} .gallery .item h2 {font-size: 21px; padding: 20px;} } @media screen and (max-width: 640px) { .gallery .item {width: calc(50% - 1px); margin-bottom: 2px;} .gallery .item h2 {font-size: 19px; padding: 16px;} } @media screen and (max-width: 540px) { .gallery .item {width: 100%;} .gallery .item h2 {font-size: 26px; padding: 30px;} } @media screen and (max-width: 480px) { .gallery .item h2 {font-size: 23px; padding: 25px;} } /*--PG-NEWS---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-news .news {display: block; width: 100%;} .pg-news .news .item {display: block; width: 100%; padding-left: 290px; margin-bottom: 50px; position: relative; box-sizing: border-box;} .pg-news .news .item .img {display: block; width: 270px; position: absolute; left: 0; top: 0; margin: 0;} .pg-news .news .item .img img {display: block; width: 100%;} .pg-news .news .item h2 {text-align: left; margin: 0 0 5px; font-size: 20px;} .pg-news .news .item h2 a {display: inline-block; color: #4baf84; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .pg-news .news .item h2 a:hover {color: black;} .pg-news .news .item p {font-size: 14px; margin: 0; min-height:90px; } .pg-news .news .item > a {display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #4baf84; margin-top: 10px; float: right;} .pg-news .news .item > a:hover {text-decoration: underline;} @media screen and (max-width: 960px) { .pg-news .news .item {padding-left: 240px; margin-bottom: 45px;} .pg-news .news .item .img {width: 222px;} .pg-news .news .item h2 {margin: 0 0 4px; font-size: 18px;} .pg-news .news .item p {font-size: 13px;} .pg-news .news .item > a {font-size: 10px; margin-top: 8px;} } @media screen and (max-width: 768px) { .pg-news .news .item {padding-left: 200px; margin-bottom: 40px;} .pg-news .news .item .img {width: 185px;} .pg-news .news .item h2 {font-size: 17px;} .pg-news .news .item p {font-size: 12px;} } @media screen and (max-width: 640px) { .pg-news .news .item {padding: 0; margin-bottom: 50px;} .pg-news .news .item .img {width: 100%; position: relative; left: auto; top: auto; margin-bottom: 12px;} .pg-news .news .item h2 {font-size: 20px; margin-bottom: 10px;} .pg-news .news .item p {font-size: 13px;} } @media screen and (max-width: 540px) { .pg-news .news .item {margin-bottom: 40px;} .pg-news .news .item .img {margin-bottom: 10px;} .pg-news .news .item h2 {font-size: 18px; margin-bottom: 8px;} .pg-news .news .item p {font-size: 12px;} } /*--PG-NEWS - DETAIL---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-news-detail .section {background: #efefef;} .detail {display: block; width: 100%; background: white; padding: 40px; box-sizing: border-box;} .detail h1 {font-size: 30px; text-align: left; color: black; text-transform: none; margin-bottom: 10px;} .detail h1:before {display: none;} .detail img {display: block; width: 100%; margin-bottom: 20px;} .detail .img {display: block; width: 100%; max-width: 340px; margin: 25px 0;} .detail .img img {display: block; width: 100%;} @media screen and (max-width: 960px) { .detail {padding: 35px;} .detail h1 {font-size: 26px; margin-bottom: 9px;} } @media screen and (max-width: 768px) { .detail {padding: 30px;} .detail h1 {font-size: 22px; margin-bottom: 8px;} .detail .img {max-width: 300px; margin: 22px 0;} } @media screen and (max-width: 640px) { .detail {padding: 25px;} .detail h1 {font-size: 20px; margin-bottom: 7px;} } /*--PG-TIPS---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-tips .section, .pg-tips .section h1 span {background: #efefef;} .tips {display: flex; width: 100%; justify-content: flex-start; flex-wrap: wrap;} .tips .item {display: flex; width: calc(50% - 6px); height: 60px; align-items: center; align-content: center; flex-wrap: wrap; margin: 3px; background: white; padding: 0px 15px 0 75px; box-sizing: border-box; position: relative;} .tips .item:before {display: flex; width: 60px; height: 60px; justify-content: center; align-items: center; color: white; font-weight: 700; font-size: 24px; background: #4baf84; content: ""; position: absolute; left: 0; top: 0;} .tips .item:nth-child(1):before {content: "1";} .tips .item:nth-child(2):before {content: "2";} .tips .item:nth-child(3):before {content: "3";} .tips .item:nth-child(4):before {content: "4";} .tips .item:nth-child(5):before {content: "5";} .tips .item:nth-child(6):before {content: "6";} .tips .item:nth-child(7):before {content: "7";} .tips .item:nth-child(8):before {content: "8";} .tips .item:nth-child(9):before {content: "9";} .tips .item h3 {text-align: left; font-size: 17px; color: black; margin: 0;} .tips .item a {display: inline-block; font-size: 11px; color: #4baf84; font-weight: 700; text-transform: uppercase; position: relative;} .tips .item a:hover {text-decoration: underline;} .tips .item a:last-child:before {display: inline-block; width: 1px; height: 10px; background: black; opacity: 0.2; margin: 0 10px 0 7px; content: "";} .pg-tips .button {width: 300px; margin-top: 30px;} .pg-tips .button span {color: #4baf84;} .pg-tips .button:hover span {color: white;} .discounts {display: block; width: 100%;} .discounts .item {display: block; width: 100%; padding: 30px; background: white; margin-bottom: 5px; box-sizing: border-box; position: relative;} .discounts .item h3 {display: block; width: calc(100% - 165px); color: black; text-align: left; margin: 0;} .discounts .item .advantage {display: block; width: calc(100% - 165px); color: #4baf84; font-size: 16px; font-weight: 700; margin: 0 0 10px;} .discounts .item .logo {display: block; width: 150px; position: absolute; right: 30px; top: 30px;} .discounts .item .logo img {display: block; width: 100%;} .discounts .item p {font-size: 14px; line-height: 1.5em;} .discounts .item .images {display: block; height: atuo; overflow: hidden; position: relative;} .discounts .images .swiper-slide {display: block; width: auto; height: 100%; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .discounts .images .swiper-slide img {display: block; width: auto; height: 100px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .discounts .images .swiper-slide:hover img {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .discounts .images .swiper-button-prev, .discounts .images .swiper-button-next {display: block; opacity: 0.8; position: absolute; top: calc(50% - 17px); width: 34px; height: 34px; z-index: 500; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .discounts .images .swiper-button-prev {left: -40px; background-image: URL('images/arrow-l.svg');} .discounts .images .swiper-button-next {right: -40px; background-image: URL('images/arrow-r.svg');} .discounts .images:hover .swiper-button-prev {left: 10px;} .discounts .images:hover .swiper-button-next {right: 10px;} .discounts .images .swiper-button-prev:hover, .discounts .images .swiper-button-next:hover {opacity: 1;} @media screen and (max-width: 960px) { .tips .item {width: calc(50% - 4px); height: 54px; margin: 2px; padding: 0px 12px 0 66px;} .tips .item:before {width: 54px; height: 54px; font-size: 21px;} .tips .item h3 {font-size: 15px;} .tips .item a {font-size: 10px;} .discounts .item {padding: 25px;} .discounts .item h3 {width: calc(100% - 140px);} .discounts .item .advantage {width: calc(100% - 140px); font-size: 15px; margin: 0 0 9px;} .discounts .item .logo {width: 125px; right: 25px; top: 25px;} .discounts .item p {font-size: 13px;} } @media screen and (max-width: 768px) { .tips .item {width: calc(50% - 2px); height: 50px; margin: 1px; padding: 0px 12px 0 62px;} .tips .item:before {width: 50px; height: 50px; font-size: 18px;} .tips .item h3 {font-size: 13px;} .tips .item a {font-size: 9px;} .pg-tips .button {width: 270px; margin-top: 25px;} .discounts .item h3 {width: 100%;} .discounts .item .advantage {width: 100%; font-size: 14px; margin: 0 0 8px;} .discounts .item .logo {width: 125px; position: relative; right: auto; top: auto; margin: 0 0 15px;} .discounts .item p {font-size: 12px;} } @media screen and (max-width: 640px) { .tips {justify-content: center;} .tips .item {width: 100%; max-width: 400px; height: 54px; margin: 2px; padding: 0px 12px 0 66px;} .tips .item:before {width: 54px; height: 54px; font-size: 21px;} .tips .item h3 {font-size: 15px;} .tips .item a {font-size: 10px;} .pg-tips .button {width: 240px; margin-top: 25px;} } /*--PG-CONTACT---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .contact {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-bottom: 50px;} .contact .info {display: block; width: 45%;} .contact .info h2 {text-align: left; font-size: 16px; margin: 0 0 2px;} .contact .info ul {margin-bottom: 30px;} .contact .info ul li {padding: 0;} .contact .info ul li:before {display: none;} .contact .form {display: flex; width: calc(55% - 25px); flex-wrap: wrap; align-items: flex-start; padding: 40px; background: #efefef; box-sizing: border-box;} .contact .form input, .contact .form textarea {display: block; width: calc(100% - 30px); padding: 0 15px; height: 44px; font-size: 13px; font-weight: 500; color: black; background: white; border: solid 1px rgba(0,0,0,0.2); outline: none; border-radius: 2px; font-family: 'Encode Sans Expanded', sans-serif;} .contact .form .input, .contact .form .textarea {display: block; width: 100%; margin-bottom: 2px; box-sizing: border-box; } .contact .form textarea {height: 260px; padding: 15px;} .contact .form .button {width: 100%; font-size: 12px; margin-top: 2px; border: none;} .pg-contact iframe {display: block; width: 100%; height: 400px;} @media screen and (max-width: 960px) { .contact .info {display: block; width: calc(100% - 370px);} .contact .form {width: 350px; padding: 30px; margin: 0;} } @media screen and (max-width: 680px) { .contact .info {display: block; width: 100%;} .contact .info h2, .contact .info ul li {text-align: center;} .contact .form {width: 100%; padding: 70px 15%; margin: 0;} } @media screen and (max-width: 540px) { .contact .form {padding: 55px 10%;} } .mapa-wrap { max-width: 700px; } .mapa-wrap iframe { width: 100%; height: 466px; display: block; }