body:before {
  z-index: 999;
  position: fixed;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  content: "F";
  color: #000;
  text-align: center;
  font: 400 0.8em/20px 'phenomenalight', sans-serif, sans-serif;
  background: pink;
  display: none;
}
@media only screen and (max-width: 1440px) {
  body:before {
    content: "W";
    color: #FFF;
    background: blueviolet;
  }
}
@media only screen and (max-width: 1280px) {
  body:before {
    content: "D";
    background: indigo;
  }
}
@media only screen and (max-width: 1024px) {
  body:before {
    content: "LT";
    background: blue;
  }
}
@media only screen and (max-width: 900px) {
  body:before {
    content: "N";
    background: green;
  }
}
@media only screen and (max-width: 768px) {
  body:before {
    content: "LS";
    color: #000;
    background: greenyellow;
  }
}
@media only screen and (max-width: 600px) {
  body:before {
    content: "T";
    color: #000;
    background: yellow;
  }
}
@media only screen and (max-width: 480px) {
  body:before {
    content: "S";
    background: orange;
  }
}
@media only screen and (max-width: 320px) {
  body:before {
    content: "P";
    background: red;
  }
}
body {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #FFF;
  font: 400 115%/1.4em 'phenomenalight', sans-serif;
  background: #00605b;
}
.layout-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  transition: all 0.3s ease 0s;
}
.layout-container:before {
  position: absolute;
  left: -80px;
  bottom: -40px;
  width: 500px;
  height: 400px;
  content: "";
  background: url("../../img/floral-footer.svg") 0 bottom no-repeat;
  background-size: 100%;
}
p {
  margin: 0 0 .6em;
}
p:last-child {
  margin: 0;
}
ul {
  margin: 0;
}
h1 {
  position: relative;
  margin: 0;
  padding: 0;
  font: 400 2.3em/1em 'costa_brisaregular', sans-serif;
  text-transform: uppercase;
}
h2 {
  position: relative;
  margin: 10px 0 15px;
  padding: 0;
  font: 700 1.5em/1em 'phenomenalight', sans-serif;
  text-transform: uppercase;
}
a {
  text-decoration: none;
  color: #e84040;
}
a:hover {
  text-decoration: underline;
}
.button a {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 25px;
  font: 400 0.9em/1.1em 'costa_brisaregular', sans-serif;
  color: #00605b;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s ease 0s;
  text-decoration: none !important;
  background: url("../../img/btn.svg") center center no-repeat;
  background-size: contain;
  cursor: default;
  /*    &:hover { color: #FFF; background: @red; }*/
}
.wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: auto auto;
  gap: 0 0;
  grid-template-areas: "Z1 Z3" "Z2 Z3";
}
.logo {
  padding: 5% 5% 5% 10%;
  grid-area: Z1;
  text-align: center;
}
.content {
  padding: 5% 5% 5% 10%;
  grid-area: Z2;
}
.content .button {
  margin-top: 20px;
}
.view {
  position: relative;
  grid-area: Z3;
}
.view .view-main {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.view .view-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view .view-main .view-mask {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../../img/mask.png") center center no-repeat;
  background-size: cover;
}
.view .view-main .view-more {
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 25%;
  display: block;
  width: 35%;
  height: 35%;
  background: url("../../img/open.svg") center center no-repeat;
  background-size: contain;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.view .view-main .view-more span {
  display: block;
  text-align: center;
  font: 400 2.25vw/1em 'costa_brisaregular', sans-serif;
  color: #F2E1D9;
  transform: rotate(8deg);
}
@media only screen and (max-width: 1280px) {
  .wrapper {
    display: block;
  }
  .logo {
    order: 1;
    width: 100%;
    padding: 5%;
  }
  .view {
    order: 2;
  }
  .view .view-main .view-more span {
    font: 400 3.5vw/1em 'costa_brisaregular', sans-serif;
  }
  .content {
    order: 3;
    padding: 5%;
  }
}
@media only screen and (max-width: 600px) {
  .view {
    position: relative;
  }
  .view:before {
    display: block;
    content: "";
    padding-top: 75%;
    padding-top: 150%;
  }
  .view .ratio {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .view .view-main .view-more {
    width: 150px;
    height: 150px;
    left: 25%;
    bottom: 25px;
  }
  .view .view-main .view-more span {
    font: 400 1.3em/1em 'costa_brisaregular', sans-serif;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22home%5C%2Fipika%5C%2Fcanopy%5C%2Fcss%5C%2Fcommon.less%22%2C%22home%5C%2Fipika%5C%2Fcanopy%5C%2Fcss%5C%2Fvars.less%22%2C%22home%5C%2Fipika%5C%2Fcanopy%5C%2Fcss%5C%2Fmain.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAEA%2CIAAI%3BEAAU%3BEAAc%3BEAAiB%3BEAAa%3BEAAc%3BEAAS%3BEAAQ%3BEAAe%3BEAAa%3BEAAoB%2CqBCD7H%2CwCDC6H%3BEAA4C%3BEAAkB%3B%3BAAQvM%2CwBAJA%3BEACG%2CIAAI%3BIAAU%3BIAAc%3BIAAa%3B%3B%3BAAQ5C%2CwBAJA%3BEACG%2CIAAI%3BIAAU%3BIAAc%3B%3B%3BAAQ%5C%2FB%2CwBAJA%3BEACG%2CIAAI%3BIAAU%3BIAAe%3B%3B%3BAAQhC%2CwBAJA%3BEACE%2CIAAI%3BIAAU%3BIAAc%3B%3B%3BAAQ9B%2CwBAJA%3BEACE%2CIAAI%3BIAAU%3BIAAe%3BIAAa%3B%3B%3BAAQ5C%2CwBAJA%3BEACE%2CIAAI%3BIAAU%3BIAAc%3BIAAa%3B%3B%3BAAQ3C%2CwBAJA%3BEACE%2CIAAI%3BIAAU%3BIAAc%3B%3B%3BAAM7B%2CwBAFD%3BEACE%2CIAAI%3BIAAU%3BIAAc%3B%3B%3BAEnC9B%3BEAAO%3BEAAoB%3BEAAkB%3BEAAa%3BEAAW%3BEAAY%3BEAAa%2CqBDNlF%2C4BCMkF%3BEAAkC%2CmBAAA%3B%3BAAChI%3BEACE%3BEAAoB%3BEAAe%3BEAAwB%3BEAAyB%3BEAAa%3BEAAmB%2CcAAA%3BED2BrG%2C4BAAA%3B%3BAC1Bf%2CiBAAC%3BEAAU%3BEAAoB%3BEAAa%3BEAAe%3BEAAc%3BEAAe%2CSAAS%2CEAAT%3BEAAa%2CgBAAgB%2CiDAAhB%3BEAAmE%3B%3BAAE1K%3BEACE%2CgBAAA%3B%3BAACA%2CCAAC%3BEAAc%3B%3BAAEjB%3BEAAK%3B%3BAACL%3BEACE%3BEAAoB%3BEAAW%3BEAAY%2CoBDhBhC%2CgCCgBgC%3BEAAiC%3B%3BAAE9E%3BEAAK%3BEAAoB%2CmBAAA%3BEAAqB%3BEAAY%2CoBDnB9C%2C4BCmB8C%3BEAAgC%3B%3BAAC1F%3BEACE%3BEAAuB%2CcAAA%3B%3BAACvB%2CCAAC%3BEAAS%3B%3BAAEZ%2COACE%3BEACE%3BEAAkB%3BEAAoB%3BEAAsB%3BEAAqB%2CkBAAA%3BEAAoB%2CsBDzB5F%2CgCCyB4F%3BEAAkC%2CcAAA%3BEAAe%3BEAA2B%3BEDSpK%2C4BAAA%3BECTqM%3BEAAkC%2CgBAAgB%2C4CAAhB%3BEAA8D%3BEAA0B%3B%3B%3BAAMhV%3BEACE%3BEACA%3BEACA%2C8BAAA%3BEACA%2C6BAAA%3BEACA%2CQAAA%3BEACA%2CqBAAsB%2CQAAQ%2COAA9B%3B%3BAAGF%3BEACE%2CqBAAA%3BEAAuB%3BEAAe%3B%3BAAIxC%3BEACE%2CqBAAA%3BEAAuB%3B%3BAADzB%2CQAEE%3BEAAU%3B%3BAAGZ%3BEACE%3BEAAoB%3B%3BAADtB%2CKAEE%3BEACE%3BEAAkB%3BEAAoB%3B%3BAAH1C%2CKAEE%2CWAEE%3BEAAM%3BEAAgB%3BEAAa%3BEAAc%3B%3BAAJrD%2CKAEE%2CWAGE%3BEAAa%3BEAAY%3BEAAoB%3BEAAQ%3BEAAS%3BEAAgB%3BEAAa%3BEAAc%2CgBAAgB%2C6CAAhB%3BEAA%2BD%3B%3BAAL5K%2CKAEE%2CWAIE%3BEACE%3BEAAY%3BEAAoB%3BEAAW%3BEAAW%3BEAAgB%3BEAAY%3BEAAa%2CgBAAgB%2C6CAAhB%3BEAA%2BD%3BED5BzJ%3BEAAe%3BEC4B2K%3BEAAqB%3B%3BAAP1N%2CKAEE%2CWAIE%2CWAEE%3BEAAO%3BEAAgB%3BEAAoB%2CqBD1DpC%2CgCC0DoC%3BEAAkC%3BEDpBlE%2CWAAW%2CYAAX%3B%3BACkDjB%2CwBAjBA%3BEACE%3BIAAW%3B%3BEAEX%3BIACE%3BIAAU%3BIAAa%3B%3BEAGzB%3BIACE%3B%3BEADF%2CKAEE%2CWAAW%2CWAAW%3BIAAO%2CoBDhFpB%2CgCCgFoB%3B%3BEAG%5C%2FB%3BIAAW%3BIAAU%3B%3B%3BAAqCvB%2CwBAbA%3BEACE%3BIACE%3B%3BEACA%2CKAAC%3BID%5C%2FEW%3BIAAgB%2CSAAS%2CEAAT%3BIAAa%3BIC%2BElB%3B%3BEAFzB%2CKAGE%3BID%5C%2FEgB%3BIAAoB%3BIAAQ%3BIAAS%3BIAAW%3B%3BEC4ElE%2CKAIE%2CWAAW%3BIACT%3BIAAc%3BIAAe%3BIAAW%3B%3BEAL5C%2CKAIE%2CWAAW%2CWAET%3BIAAO%2CoBDlHA%2CgCCkHA%22%7D */