@font-face {font-family: Italianno; src: url(../fonts/Italianno-Regular.ttf)}
@font-face {font-family: LatoLight; src: url(../fonts/Lato-Light.ttf)}

body {font-family: LatoLight; font-size: 110%; background-image: url(../layoutImg/tlo2.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-color: #fff; color: #696969}

h1, h2, h3, h4, h5, h6 {color: #11162B; font-family: Italianno;}
h1 {font-size: 400%}
h2 {font-size: 350%}
h3 {font-size: 300%}
h4 {font-size: 250%}
h5 {font-size: 200%}
h6 {font-size: 150%}

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

.fakelink {cursor: pointer; color: #11162B;}
.fakelink:hover {transition: color .5s ease-out; color: #00AFEF;}
.fakelink:not(:hover) {transition: color .5s ease-out; color: #11162B}

.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}

/* menu */
.menu {background: #fff; font-family: Italianno; font-weight: normal; font-size: 200%}
.menu .logo {font-family: Italianno; font-weight: normal; font-size: 100%}

.menu-desktop {}
.menu-desktop a, .menu-desktop .menu-item {color: #11162B; 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: #00AFEF; text-decoration: none}
.menu-desktop a:not(:hover), .menu-desktop .menu-item:not(:hover) {transition: color .5s ease-out; color: #11162B}
.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 {}
.menu-mobile-switch {cursor: pointer; font-size: 100%; text-align: center}
.menu-mobile-menu {display: none}
.menu-mobile a, .menu-mobile .menu-item {color: #11162B; 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: #00AFEF; text-decoration: none}
.menu-mobile a:not(:hover), .menu-mobile .menu-item:not(:hover) {transition: color .5s ease-out; color: #11162B}
.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 */
.chm-slajder {margin-bottom: 0; padding: 0; background: #fff;}
.chm-slajder, .chm-slajd img {height: 250px;}
.chm-slajd {position: absolute; width: 100%; z-index: 8; overflow: hidden}
.chm-slajd img {width: 100%; transform: scale(1.05); object-fit: cover}
.chm-slajd .tekst {font-family: Italianno; font-size: 300%; color: #fff; text-align: center; position: absolute; padding: 20px;  width: 100%}
.chm-slajd .tekst.gl, .chm-slajd .tekst.gp, .chm-slajd .tekst.dl, .chm-slajd .tekst.dp {top: 0}
.chm-slajd .tekst a {text-decoration: none; color: #F5821F}
.chm-slajder .chm-aktywny {z-index: 9;}
.chm-slajder .chm-aktywny img {animation: chm-aktywnySlajd 3s ease;}
@keyframes chm-aktywnySlajd {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.chm-slajder .chm-nav {width: 100%; text-align: center; z-index: 10; bottom: 20px}
.chm-slajder .chm-nav div {display: inline-block; background: #fff;  margin-left: 10px; margin-right: 10px; width: 30px; height: 10px; cursor: pointer}
.chm-slajder .chm-nav div.chm-aktywny {background: #11162B;}

/* paralax */
/* dodać tę klasę do jakiegoś diva, temu divowi ustawić jakiś obrazek w tło i gotowe. Obazek js przewija obrazek połowę wolniej niż reszta strony */
.chm-parallax {background-position-x: center; background-position-y: -100px; background-repeat: no-repeat; background-size: cover;}
/*background-attachment: fixed;*/ 


/* mały nagłówek */
.maly-naglowek {height: 200px; padding: 0; overflow: hidden;}
.maly-naglowek h1 {color: #fff}


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

/* apartamenty na głownej */
.glowna-apartamenty {background:  #11162B}
.glowna-apartamenty .apartament {background: #fff;}
.glowna-apartamenty h1 {color: #fff; text-align: center}
.glowna-apartamenty h2 {}
.glowna-apartamenty a {background: #11162B; color: #fff}
.glowna-apartamenty a:hover {transition: color .5s ease-out; color: #00AFEF; text-decoration: none;}
.glowna-apartamenty a:not(:hover) {transition: color .5s ease-out; color: #fff; text-decoration: none;}

/* kontakt na głównej */
.glowna-kontakt {background: transparent}
.glowna-kontakt p {font-size: 130%}
.glowna-kontakt a {color: #11162B}
.glowna-kontakt a:hover {transition: color .5s ease-out; color: #00AFEF; text-decoration: none;}
.glowna-kontakt a:not(:hover) {transition: color .5s ease-out; color: #11162B; text-decoration: none;}
#mapka {height: 480px; background: #ccc;}

/* apartamenty w pokoje */
.pokoje-apartamenty {background: #fff}
.pokoje-apartamenty .znaczki {background: #fff}
.pokoje-apartamenty .znaczki a {background: #11162B; color: #fff; margin-top: 10px;}
.pokoje-apartamenty .znaczki a:hover {transition: color .5s ease-out; color: #00AFEF; text-decoration: none;}
.pokoje-apartamenty .znaczki a:not(:hover) {transition: color .5s ease-out; color: #fff; text-decoration: none;}

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

.okolica {background: #fff}
.okolica img {width: 100%}

.stopka {background: #11162B; color: #fff}
.stopka h1, .stopka h2, .stopka h3, .stopka h4, .stopka h5, .stopka h6 {color: #fff}
.stopka a {color: #F8F5EE}
.stopka a:hover {transition: color .5s ease-out; color: #00AFEF; text-decoration: none;}
.stopka a:not(:hover) {transition: color .5s ease-out; color: #F8F5EE; text-decoration: none;}



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







@media (min-width: 768px) {
    .chm-slajder, .chm-slajd img {height: 300px;}
    .chm-slajd .tekst {padding: 50px; font-size: 500%}
    .glowna-apartamenty {background: linear-gradient(180deg, #fff 0%, #fff 50%, #11162B 50%, #11162B 100%);}
    .glowna-apartamenty h1 {color: #11162B}
}

@media (min-width: 992px) {
    .chm-slajder, .chm-slajd img {height: 400px;}
    .chm-slajd .tekst {width: auto;}
    .chm-slajd .tekst.gl {top: 0; left: 0; text-align: left}
    .chm-slajd .tekst.gp {top: 0; right: 0; text-align: right}
    .chm-slajd .tekst.dl {top: auto; bottom: 30px; left: 0; text-align: left}
    .chm-slajd .tekst.dp {top: auto; bottom: 30px; right: 0; text-align: right}
}

@media (min-width: 1200px) {
    .chm-slajder, .chm-slajd img {height: 500px;}
    
}