/* 
#21BA5E - zielony
#37383E - szary
*/

@font-face {font-family: LibreFranklin; src: url('../fonts/LibreFranklin-Light.ttf')}
@font-face {font-family: PlayfairDisplay; src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf')}

body {font-family: LibreFranklin; font-size: 100%; background-color: #fff; color: #37383E}

h1, h2, h3, h4, h5, h6 {color: #37383E; font-family: PlayfairDisplay;}
h1 {font-size: 300%}
h2 {font-size: 270%}
h3 {font-size: 240%}
h4 {font-size: 210%}
h5 {font-size: 180%}
h6 {font-size: 150%}

a {color: #37383E; text-decoration: none;}
a:hover {transition: color .5s ease-out; color: #21BA5E;}
a:not(:hover) {transition: color .5s ease-out; color: #37383E}

iframe {border:0; overflow:hidden; max-width:100%; margin: 0; padding: 0}

.fakelink {cursor: pointer; color: #37383E;}
.fakelink:hover {transition: color .5s ease-out; color: #21BA5E;}
.fakelink:not(:hover) {transition: color .5s ease-out; color: #37383E}

.shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.text-shadow {text-shadow: 0 0 15px #000}

.text-left {text-align: left;}
.text-right {text-align: right;}

/* menu */
.menu {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,0)); font-family: PlayfairDisplay; font-size: 150%; z-index: 999;}
.menu .logo {font-size: 150%; text-align: center;}

.menu-desktop {}
.menu-desktop a, .menu-desktop .menu-item {color: #fff; text-decoration: none; display: block; height: 60px; line-height: 60px; cursor: pointer}
.menu-desktop a:hover, .menu-desktop .menu-item:hover {transition: color .5s ease-out; color: #21BA5E; text-decoration: none}
.menu-desktop a:not(:hover), .menu-desktop .menu-item:not(:hover) {transition: color .5s ease-out; color: #fff}
.menu-desktop .drop {}
.menu-desktop .submenu {background: #4F443C; position: absolute; z-index: 50}
.menu-desktop .submenu .submenu-item a {padding-right: 30px;}
.menu-desktop .submenu .submenu-item a:hover {transition: padding-left .3s ease-out, padding-right .3s ease-out; padding-left: 30px; padding-right: 15px} /* 15px, bo org col z bootstrapa ma 15, więc trzeba ustawić domyślne */
.menu-desktop .submenu .submenu-item a:not(:hover) {transition: padding-left .1s ease-out, padding-right .1s ease-out; padding-left: 15px; padding-right: 30px} /* 15px, bo org col z bootstrapa ma 15, więc trzeba ustawić domyślne */

.menu-mobile {background: rgba(0,0,0,.8)}
.menu-mobile-switch {cursor: pointer; font-size: 100%; text-align: center; color: #fff}
.menu-mobile-menu {display: none}
.menu-mobile a, .menu-mobile .menu-item {color: #fff; text-decoration: none; display: block; min-height: 40px; line-height: 40px; cursor: pointer}
.menu-mobile a:hover, .menu-mobile .menu-item:hover {transition: color .5s ease-out; color: #21BA5E; text-decoration: none}
.menu-mobile a:not(:hover), .menu-mobile .menu-item:not(:hover) {transition: color .5s ease-out; color: #fff}
.menu-mobile .drop {}
.menu-mobile .submenu {background: #4F443C;}
.menu-mobile .submenu .submenu-item a {padding-left: 30px; padding-right: 30px;}
.menu-mobile .submenu .submenu-item a:hover {transition: padding-left .3s ease-out, padding-right .3s ease-out; padding-left: 30px; padding-right: 15px} /* 15px, bo org col z bootstrapa ma 15, więc trzeba ustawić domyślne */
.menu-mobile .submenu .submenu-item a:not(:hover) {transition: padding-left .1s ease-out, padding-right .1s ease-out; padding-left: 15px; padding-right: 30px} /* 15px, bo org col z bootstrapa ma 15, więc trzeba ustawić domyślne */

                                                                                                                                                
/* slajder */
.slajd {background-repeat: no-repeat; background-position: center; background-size: cover; color: #fff; font-size: 3rem; font-family: PlayfairDisplay;}
.slajd .row {--bs-gutter-x: 0 !important}

/* mały nagłówek */
.maly-naglowek {background-image: url('../layoutImg/maly-naglowek1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
.maly-naglowek h1 {color: #fff}

/* powitanie na głównej */
.glowna-powitanie {background: #fff}

/* apartamenty na głownej */
.glowna-apartamenty {background:  #37383E}
.glowna-apartamenty .apartament {background: #fff;}
.glowna-apartamenty h1 {color: #fff; text-align: center}
.glowna-apartamenty a {background: #21BA5E; color: #fff !important}
.glowna-apartamenty a:hover {transition: background .5s ease-out; background: #37383E; text-decoration: none;}
.glowna-apartamenty a:not(:hover) {transition: background .5s ease-out; color: #fff; text-decoration: none;}

.flip-card {perspective: 1000px;}
.flip-card-inner {position: relative; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-repeat: no-repeat; background-position: center; background-size: cover;}
.flip-card-front {background-color: #fff; color: #37383E;}
.flip-card-front h2 {color: #fff;}
.flip-card-back { background-color: #fff; color: #37383E; transform: rotateY(180deg);}



#mapka {height: 480px; background: #ccc;}

/* apartamenty w pokoje */
.pokoje-apartamenty {background: #fff}
.pokoje-apartamenty a {background: #21BA5E; color: #fff !important}
.pokoje-apartamenty a:hover {transition: background .5s ease-out; background: #37383E; text-decoration: none;}
.pokoje-apartamenty a:not(:hover) {transition: background .5s ease-out; color: #fff; text-decoration: none;}

/* zdjecia w galerii */
.galeria-zdjecia {background: #fff}
.galeria-zdjecia img {width: 100%}


.stopka {background: #37383E; color: #fff}
.stopka i {color: #21BA5E}
.stopka h1, .stopka h2, .stopka h3, .stopka h4, .stopka h5, .stopka h6 {color: #fff}
.stopka a, .stopka .fakelink {color: #fff}
.stopka a:hover, .stopka .fakelink:hover {transition: color .5s ease-out; color: #21BA5E; text-decoration: none;}
.stopka a:not(:hover), .stopka .fakelink:not(:hover) {transition: color .5s ease-out; color: #fff; text-decoration: none;}

.showOnScroll {opacity: .01; transition: opacity 1s}


.red {background: red}
.green {background: green}
.blue {background: blue}







@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

    
}