:root {
  --cb-main-color: #30373F;
  --cb-font-sans-serif: "Abhaya Libre", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --cb-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cb-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --cb-body-font-family: var(--cb-font-sans-serif);
  --cb-body-font-size: 1rem;
  --cb-body-font-weight: 400;
  --cb-body-line-height: 1.5;
  --cb-body-bg: #fff;
  --cb-white-rgb: 255, 255, 255;
}

/* reboot */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html, body {
  margin: 0;
  font-family: var(--cb-body-font-family);
  font-size: var(--cb-body-font-size);
  font-weight: var(--cb-body-font-weight);
  line-height: var(--cb-body-line-height);
  color: var(--cb-main-color);
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100vh;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h6, h5, h4, h3, h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cb-main-color);
}

h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: 3rem;
  color: #fff;
  line-height: 3.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  h2 {
    font-size: 3rem;
    color: #fff;
    line-height: 3.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

mark {
  padding: 0.1875em;
  background-color: #fff;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: var(--cb-main-color);
  text-decoration: none;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--cb-font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--cb-main-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--cb-main-color);
  background-color: #fff;
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}
/* end reboot */

html{
  scroll-behavior: smooth;
}
html, body {
  position: relative;
  -webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper {
  display: flex;
  height: calc(100vh - 80px);
  position: relative;
}

/* header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 30;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 1rem 0;
}
.logo {
  position: relative;
}
.logo a {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: url(../img/logo.svg) center/cover;
  transition: all .6s;
  -webkit-transition: all .6s;
}
@media (min-width: 768px) {
  .logo a {
    width: 3rem;
    height: 3rem;
  }
}
@media (min-width: 992px) {
  .logo {
    left: 8rem;
  }
}
.info {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.audio{
  margin-right: 2rem;
}
.audio a {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.audio svg path{
  transition: all .6s;
  -webkit-transition: all .6s;
}
.audio svg:hover path {
  stroke: #AB8C6B;
}
.lang {
  margin-right: 1rem;
}
.lang a {
  transition: all .6s;
  -webkit-transition: all .6s;
}
.lang a:hover {
  color: #AB8C6B;
}
.contact {
  display: none;
}
.contact a {
  display: flex;
  align-items: center;
}
.contact a span {
  display: block;
}
.contact a span.phone-img {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-right: .75rem;
}
.contact a span.phone-img svg {
  width: 100%;
  height: 100%;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.contact a:hover svg path {
  transition: all .6s;
  -webkit-transition: all .6s;
}
.contact a:hover svg path {
  stroke: #AB8C6B;
}
@media (min-width: 992px) {
  .contact {
    display: block;
  }
  .lang {
    margin-right: 5rem;
  }
}
.burger {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-left: .25rem;
}
.burger-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: .125rem;
  background-color: #AB8C6B;
}
.burger-item::before,
.burger-item::after {
  content: '';
  position: absolute;
  background-color: #AB8C6B;
  width: 1.5rem;
  height: .125rem;
  opacity: 0;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.burger-item::before {
  top: -.45rem;
}
.burger-item::after {
  top: .45rem;
}
.navbar {
  display: block;
  position: absolute;
  padding: 1.75rem 2rem;
  color: #fff;
  width: 100%;
  height: 100vh;
  top: 0;
  left: -100%;
  background: #474A50;
  z-index: 100;
  opacity: .8;
  transition: left .9s;
  -webkit-transition: left .9s;
}
@media (min-width: 768px) {
  .navbar {
    width: 20rem;
  }
}
.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition: opacity .6s;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2rem;
  margin-left: 1.5rem;
}
.btn-menu > span,
.close > span {
  display: block;
  top: 1px;
  position: relative;
}
.btn-menu:hover .burger-item::before,
.btn-menu:hover .burger-item::after {
  opacity: 1;
}
.open .navbar {
  left: 0;
}
.open .btn-menu {
  opacity: 0;
}
.navbar a {
  color: #fff;
}
.menu-list {
  margin-top: 7.5rem;
}
.menu-list > li {
  display: block;
  margin-bottom: 1rem;
}
.menu-list .menu-item {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2rem;
  transition: all .3s;
}
.menu-list .menu-item:hover {
  color: #CDB49A;
}
.dropdown-menu {
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.show .dropdown-menu {
  opacity: 1;
  height: 432px;
}
.dropdown-menu li {
  display: block;
  margin-top: .5rem;
}
.dropdown-item {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.75;
  color: #fff;
}
.dropdown-item:hover {
  color: #CDB49A;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.dropdown-toggle {
  display: block;
  position: relative;
}
.dropdown-toggle::after {
  content: '';
  position: absolute;
  right: 0;
  top: 40%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-right: 1rem;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.dropdown-toggle:hover::after,
.show .dropdown-toggle::after {
  border-color: #AB8C6B;
}
.show .dropdown-toggle {
  color: #AB8C6B;
}
.show .dropdown-toggle:hover {
  color: #CDB49A;
}
.show .dropdown-toggle:hover::after {
  border-color: #CDB49A;
  transform: rotate(-45deg);
}
.show .dropdown-toggle::after {
  transform: rotate(135deg);
}
.close {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2rem;
  color: #fff;
}
.close:hover .burger-item {
  background-color: transparent;
}
.close .burger-item::before,
.close .burger-item::after {
  top: 0;
}
.close:hover .burger-item::before {
  height: .125rem;
  top: 0;
  opacity: 1;
  transform: rotate(45deg);
}
.close:hover .burger-item::after {
  height: .125rem;
  top: 0;
  opacity: 1;
  transform: rotate(135deg);
}
/* end header */



/* section video-bg */
.overlay-static {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.overlay-static-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.overlay-static-inner-opacity {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transition: all .6s;
  -webkit-transition: all .6s;
}
@media (min-width: 992px) {
  .overlay-static:hover .overlay-static-inner .overlay-static-inner-opacity {
    opacity: 0;
  }
}
.logo-home {
  width: 8rem;
  height: 8rem;
  background: url(../img/logo_home.svg) center/cover;
  margin-bottom: 1.5rem;
}
.overlay-static-inner-opacity h2 {
  color:#fff;
  font-weight: 700;
  font-size: 3rem;
  line-height: 3.5rem;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}
.btn-cabo {
  display: inline-block;
  background-color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  padding: 0 2.25rem;
  margin-bottom: 7rem;
}
.overlay-static-inner p {
  font-weight: 700;
  margin-bottom: 2rem;
}
.btn-next-step {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 20;
  width: 4rem;
  height: 4rem;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.btn-next-step:hover {
  background-color: #CDB49A;
  border-color: #CDB49A;
}
.btn-next-step::after {
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(135deg);
  transition: all .6s;
  -webkit-transition: all .6s;
}
.btn-to-description {
  margin-bottom: 4rem;
}
.overlay-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  display: none;
}
@media (min-width: 992px) {
  .overlay-fluid {
    display: flex;
  }
}
.overlay-fluid-left,
.overlay-fluid-right {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.overlay-fluid-left {
  z-index: 11;
}
.overlay-fluid-left .overlay-static-inner-opacity {
  position: absolute;
  bottom: 0;
  right: -151px;
  margin-bottom: 11.5rem;
  opacity: 0;
}
.overlay-static:hover .overlay-fluid-left .overlay-static-inner-opacity {
  opacity: 1;
}
.overlay-fluid-left p,
.overlay-fluid-right p {
  font-size: 3rem;
  line-height: 3.5rem;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.left-open .overlay-fluid-left {
  background-color: rgba(0, 0, 0, 0.34);
  width: 70%;
}
.left-open .overlay-fluid-right {
  width: 30%;
}
.right-open .overlay-fluid-right {
  background-color: rgba(0, 0, 0, 0.34);
  width: 70%;
}
.right-open .overlay-fluid-left {
  width: 30%;
}
.left-open .overlay-fluid-left p ,
.right-open .overlay-fluid-right p {
  opacity: 1;
}
.video-bg {
  height: calc(100vh - 80px);
  overflow: hidden;
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  transition: all 4s;
  -webkit-transition: all 4s;
  
}
.start .video-bg {
  opacity: 1;
}
@supports (object-fit: cover) {
  .video-bg > video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* end section video-bg */

/* section description */
.main-description {
  display: none;
  height: calc(100vh - 80px);
  overflow: hidden;
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  flex-direction: row;
}
.description .main-description {
  display: flex;
}
.exterior,
.interior {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  transition: all .9s;
  -webkit-transition: all .9s;
}
.exterior .title-description-inner h2,
.interior .title-description-inner h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 3.5rem;
  margin-bottom: 3rem;
  letter-spacing: 1px;
}
.title-description-inner {
  margin-left: 10.5rem;
}
.description .exterior {
  background:  linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../img/exterior.jpg) center/cover;
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.description .interior {
  background:  linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../img/interior.jpg) center/cover;
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px);
    transform: translateY(-1200px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px);
    transform: translateY(-1200px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px);
    transform: translateY(1200px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px);
    transform: translateY(1200px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.exterior-open .exterior {
  width: 60%;
}
.exterior-open .interior {
  width: 40%;
  background:  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/interior.jpg) center/cover;
}
/* .exterior-open .exterior .title-description-inner,
.interior-open .interior .title-description-inner {
  display: none;
} */
.interior-open .exterior {
  width: 40%;
  background:  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/exterior.jpg) center/cover;
}
.interior-open .interior {
  width: 60%;
}
.exterior-hover,
.interior-hover {
  display: flex;
  opacity: 0;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 30;
  transition: all .9s;
  -webkit-transition: all .9s;
}
.exterior-open .exterior-hover,
.interior-open .interior-hover {
  opacity: 1;
}
.exterior-description,
.exterior-video,
.interior-description,
.interior-video {
  display: flex;
  position: relative;
  background-color: #666162;
}
.exterior-description,
.interior-description {
  height: 55%;
}
.exterior-video,
.interior-video {
  height: 45%;
}
@supports (object-fit: cover) {
  .exterior-video > video,
  .interior-video > video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.btn-more {
  display: flex;
  position: absolute;
  left: 10rem;
  bottom: 9rem;
  align-items: center;
  justify-content: center;
  z-index: 30;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.btn-more span {
  display: block;
  position: relative;
  width: 4rem;
  height: 4rem;
  border: 1.5px solid #fff;
  border-radius: 50%;
  margin-right: .75rem;
}
.btn-more span:before {
  content: "+";
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
  width: 4rem;
  font-size: 4rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.btn-more:hover {
  color: #CDB49A;
}
.btn-more:hover > span {
  background-color: #CDB49A;
}
.btn-more:hover span::before {
  color: #30373F;
} 
.exterior-description-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5rem 0 3rem 10rem;
}
.exterior-description-list {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5rem 0 3rem 10rem;
  transition: all .6s;
  -webkit-transition: all .6s;
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.exterior-open .exterior-description-main {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.list-open .exterior-description-list {
  display: block;
}
.list-open .exterior-description-main {
  display: none;
}
.exterior-description-main h2 {
  margin-bottom: 1.5rem;
}
.exterior-description-main p {
  max-width: 29.25rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.75rem;
  margin-bottom: 3.5rem;
}
.go-to-list {
  display: block;
  position: absolute;
  left: 10rem;
  bottom: 3rem;
  width: 2rem;
  height: 2rem;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.go-to-list::before {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #30373F;
  top: 50%;
  left: 0;
  transition: all .6s;
  -webkit-transition: all .6s;
}
.go-to-list::after {
  display: block;
  content: '';
  position: absolute;
  right: 0;
  top: 12px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #30373F;
  border-right: 2px solid #30373F;
  transform: rotate(45deg);
  transition: border-color .6s;
  -webkit-transition: border-color .6s;
}
.go-to-list:hover {
  width: 2.3rem;
}
.go-to-list:hover::before {
  background-color: #CDB49A;
}
.go-to-list:hover::after {
  border-color: #CDB49A;
}
.list-open .go-to-list::after {
  transform: rotate(225deg);
  right: auto;
  left: 0;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* end section description */

/* page contacts */
.contact-img {
  width: 50%;
  position: relative;
  height: 100%;
  background: url(/img/contact-img.jpg) center/cover;
}
.contact-info {
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow: hidden;
}
.contact-info-data {
  height: 50%;
  padding: 3rem 3rem 3rem 14.5rem;
}
.contact-info h1 {
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: 1px;
  margin-bottom: 2.25rem;
}
.contact-data {
  margin-bottom: 1rem;
}
.contact-data span {
  display: block;
  font-size: .85rem;
  color: 666162;
  line-height: 1.75rm;
}
.contact-data p {
  font-weight: 700;
  line-height: 1.75rem;
}
.contact-data a {
  display: block;
  color: #AB8C6B;
}
.contact-info-map {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.contact-info-map iframe {
  left:0;
  top:0;
  height:100% !important;
  width:100% !important;
  position:absolute;
}
 /* end page contacts */

  /* page about */
  .about-left,
  .about-right {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all .6s;
    -webkit-transition: all .6s;
  }
  .about-left {
    background: url(/img/about-left.jpg) center/cover;
  }
  .about-right {
    background: url(/img/about-right.jpg) center/cover;
  }
  .left-open .about-left {
    width: 60%;
  }
  .left-open .about-right {
    width: 40%;
  }
  .right-open .about-left {
    width: 40%;
  }
  .right-open .about-right {
    width: 60%;
  }
  .about-left-hover,
  .about-right-hover {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
    overflow-y: scroll;
    scrollbar-width: none;
  }
  .about-left-hover::-webkit-scrollbar,
  .about-right-hover::-webkit-scrollbar {
    width: 0;
  }
  .about-left-hover {
    padding: 8rem 3rem 3rem 10rem;
    background: #30373F;
  }
  .about-right-hover {
    color: #30373F;
    padding: 8rem 3rem 3rem 10rem;
    background: #EEEEE8;
  }
  .about-left p {
    line-height: 1.75rem;
    color: #fff;
  }
  .about-left h2 {
    color: #fff;
    margin-bottom: 2rem;
  }
  .about-right-hover p {
    line-height: 1.75rem;
    color: #30373F;
  }
  .about-right-hover h2 {
    color: #30373F;
    margin-bottom: 2rem;
  }
  .left-open .about-left-hover {
    opacity: 1;
  }
  .right-open .about-right-hover {
    opacity: 1;
    /* -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; */
  }
  .about-animate {
    max-width: 29rem;
  }
  .about-left-data {
    margin: 3rem 0;
  }
  .about-animate h5 {
    font-size: 1.5rem;
    line-height: 1.75rem;
    color: #fff;
  }
  .about-right-hover .about-animate h5 {
    color: #30373F;
    margin-bottom: 1rem;
  }
  .about-animate ul {
    display: flex;
  }
  .about-right-hover .about-animate ul {
    flex-direction: column;
  }
  .about-animate ul li {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;
  }
  .about-right-hover .about-animate ul li {
    align-items: start;
  }
  .about-left-hover .about-animate ul li {
    color: #fff;
  }
  .about-animate ul li span {
    display: flex;
    margin-right: .5rem;
    margin-left: .5rem;
    font-size: 3rem;
    line-height: 3.5rem;
    align-items: center;
    justify-content: center;
    color: #AB8C6B;
    min-width: 15%;
  }
  .left-open .about-left-hover .about-animate {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .right-open .about-right-hover .about-animate {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }



















  .ratio {
    position: relative;
    width: 100%;
  }
  .ratio::before {
    display: block;
    padding-top: var(--aspect-ratio);
    content: "";
  }
  .ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .ratio-1x1 {
    --aspect-ratio: 100%;
  }
  
  .ratio-4x3 {
    --aspect-ratio: 75%;
  }
  
  .ratio-16x9 {
    --aspect-ratio: 56.25%;
  }
  
  .ratio-21x9 {
    --aspect-ratio: 42.8571428571%;
  }