/*
Theme Name: 1779 Suites
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme.
Version: 1.0
Author: Blue Kiwi (Kriesi - parent theme)
Author URI: https://bluekiwi.sk (http://www.kriesi.at)
Template: enfold
*/

/* ---- VARIABLES */
:root {
  --black: #1c1d22;
  --brown: #ab7038;
  --brown-rgb: 171, 112, 56;
  --brown25: #eadbcd;
  --brown50: #d5b79b;
  --brown75: #c49973;

  --lexend: "Lexend", sans-serif;
  --inclusive: "Inclusive Sans", sans-serif;

  --transition-base: all 0.3s ease-in-out;
}

/* ---- GENERAL */

.pt-0 .content {
  padding-top: 0;
}

.mt-0 {
  margin-top: 0 !important;
}

/* Buttons */

/* general buttons & older one-pager */
body div .avia-button,
.av-image-caption-overlay,
.avia-image-container-inner,
.avia_image,
.avia_ajax_form .button,
.avia_button_icon svg {
  border-radius: 0;
  transition: var(--transition-base);
}

.avia-button.avia-size-x-large {
  font-size: 18px !important;
}

.avia-button.avia-size-large {
  font-size: 18px;
}

div .alternate_color .button {
  border: 1px solid var(--brown25);
  background-color: transparent;
}

.alternate_color .button:hover,
.alternate_color .button:focus {
  color: var(--brown25) !important;
}

/* btn main (hero primary) */
#top .main_color .avia-color-theme-color {
  background-color: var(--brown) !important;
  border: 1px solid var(--brown) !important;
}

#top .main_color .avia-color-theme-color:hover {
  background-color: var(--black) !important;
  border: 1px solid var(--brown) !important;
  color: var(--brown25) !important;
}

/* btn blank (hero details/more) */
#top #hero.main_color .avia-color-theme-color-highlight {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}
#top #hero.main_color .avia-color-theme-color-highlight:hover {
  color: var(--black) !important;
  border: 1px solid transparent !important;
}
#top
  #hero.main_color
  .avia-color-theme-color-highlight:hover
  .avia_button_icon
  svg {
  fill: var(--black) !important;
}
.btn-bottom .avia_iconbox_title {
  display: block;
}

/* btn-bottom*/
.btn-bottom .avia-button .avia_button_icon.avia_button_icon_right {
  top: 0;
  transition: var(--transition-base);
}
.btn-bottom .avia-button:hover .avia_button_icon.avia_button_icon_right {
  top: 4px;
}

.btn-right .avia-button .avia_button_icon.avia_button_icon_right {
  left: 4px;
  transition: var(--transition-base);
}
.btn-right .avia-button:hover .avia_button_icon.avia_button_icon_right {
  left: 8px;
}

.btn-bottom .avia-button .avia_button_icon.avia_button_icon_right {
  left: 0;
}

/* btn-primary not hero*/
#top .main_color:not(#hero) .avia-color-theme-color:hover {
  border: 1px solid var(--brown75);
}

/* alternate_color section btn*/
#top .alternate_color .avia-color-theme-color.avia-button {
  color: var(--brown);
  background-color: var(--brown25);
  border: 1px solid var(--brown25);
}
#top .alternate_color .avia-color-theme-color.avia-button:hover {
  color: #fff;
  background-color: var(--brown75);
  border: 1px solid var(--brown25);
}

/* Typography */
h1,
h2,
h3 {
  font-family: var(--lexend);
  text-transform: none !important;
  /* letter-spacing: normal !important */
  /* you’ll get light (300), regular (400) or semibold (600) via font-weight */
}

body,
p {
  font-family: var(--inclusive);
  font-weight: 300;
  /* font-style: italic for the 400 italic; font-weight: 700 for bold */
}

h2 {
  font-weight: 200 !important;
  /* font-variation-settings: 'wght' 200; */
}

#hero h1 {
  color: var(--black);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 200;
  font-size: 48px;
}

#hero p {
  font-size: 20px;
  color: var(--black);
}

strong {
  font-weight: normal;
}

a {
  transition: var(--transition-base);
}

#kontakt h6,
#kontaktne-udaje h6 {
  font-size: 20px;
  color: var(--brown25);
  font-weight: normal;
}

#kontakt h6 span,
#kontaktne-udaje h6 span {
  margin-bottom: 10px;
}

#kontakt h6 a,
#kontaktne-udaje h6 {
  /* transition: var(--transition-base); */
}

#kontakt h6 a:hover,
#kontaktne-udaje h6 a:hover {
  color: #fff;
}

/* ---- HEADER & FOOTER */

#top #header .av-main-nav > li > a {
  font-size: 16px;
  font-weight: 300;
}

.header_color .main_menu ul:first-child > li.current-menu-item > a {
  color: var(--brown50);
}

.header_color .main_menu ul:first-child > li a:hover,
.header_color .main_menu ul:first-child > li a:focus {
  color: var(--brown75);
}

#header_main {
  border-bottom: 1px solid rgba(var(--brown-rgb), 0.25) !important;
}

.av_header_transparency #header_main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

#top #header .av-menu-button > a .avia-menu-text {
  border-radius: 0;
  border-width: 1.5px;
  border-color: var(--brown);
}

#socket {
  border-top: 1px solid rgba(var(--brown-rgb), 0.25) !important;
}

#socket .copyright {
  width: 100%;
  text-align: center;
  font-size: 13px;
}

/* ---- HERO */
#hero-text,
#hero-cta,
#hero-more {
  /* animation-name: fadeInUp;
  animation-duration: 1s; */
  margin-top: 0;
}

#hero-text,
#hero-cta {
  margin-bottom: 40px;
}

.hero-homepage #hero-text,
.hero-homepage #hero-cta {
  margin-bottom: 80px;
}

#hero-text {
  /* animation-delay: 500ms; */
}

#hero-cta {
  /* animation-delay: 2000ms; */
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* INTRO SECTION */

#detaily,
#rezervacie {
  padding-top: 30px; /* 80px total */
}

#detaily h2,
.intro-section h2 {
  text-align: center;
  margin-bottom: 50px;
}

#detaily p,
.intro-section p:not(.form_element) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.intro-section:not(#detaily) {
  padding-bottom: 60px;
}

.intro-text {
  margin-bottom: 50px;
}
#top #wrap_all #main .avia-no-border-styling.section-recommended {
  border-top: 1px solid var(--brown50);
  margin-top: 80px;
}

.section-recommended h2 {
  margin-bottom: 30px;
}

/* ---- RESPONSIVE COLUMNS */

.col-text {
  /* text-align: center; */
}
.col-text h2 {
  margin-bottom: 16px;
}

.col-text h6 {
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: 400;
}

.col-text .avia-button {
  margin-top: 30px;
}

.col-text.first {
  padding-left: 50px;
}

.izby {
  border-top: 1px solid var(--brown75) !important;
}

#top .izby .avia-gallery img {
  border: 1px solid var(--brown75) !important;
}

/* KONTAKT */

.intro-section input[type="submit"] {
  background-color: var(--brown) !important;
  border: 1px solid var(--brown25) !important;
}

.intro-section input[type="submit"]:hover {
  background-color: var(--brown50) !important;
  border: 1px solid var(--brown25) !important;
  color: var(--black) !important;
}

.ui-datepicker-buttonpane button {
  color: var(--brown) !important;
  transition: var(--transition-base);
}

.ui-datepicker-buttonpane button:hover {
  background-color: var(--brown) !important;
  color: var(--brown25) !important;
}

#top .avia-datepicker-div .ui-datepicker-month,
#top .avia-datepicker-div .ui-datepicker-year {
  color: var(--brown) !important;
}

.ui-datepicker-unselectable.ui-state-disabled {
  color: #666;
}

/* 1) Tablet (768px–992px): make image 1/3, text 2/3 */
@media (min-width: 768px) and (max-width: 992px) {
  .col-text.first {
    padding-left: 0;
  }

  #detaily p,
  .intro-section p {
    width: 100%;
  }

  /* .responsive-widths .col-image {
	width: 33.333% !important;
  }

  .responsive-widths .col-text {
	width: 66.666% !important;
  } */
}

/* 2) Mobile (≤767px): full-width stack + reverse order */
@media only screen and (max-width: 767px) {
  #detaily p,
  .intro-section p {
    width: 100%;
  }

  .reverse-on-mobile .flex_column_table {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .reverse-on-mobile .flex_column_table .col-image,
  .reverse-on-mobile .flex_column_table .col-text {
    width: 100% !important;
  }

  .col-image .avia_image {
    width: 100%;
    height: 330px;
  }

  .col-text h2 {
    text-align: center !important;
  }

  .col-text {
    text-align: center;
  }

  .section-recommended h2 {
    margin-bottom: 50px;
  }

  .col-text ul {
    list-style: none;
  }
}