/* KOLORY 
light: #dff7ba
hover: #cbf28f
main: #84A651
strong: #445923

light complementary: #9551A6
dark complementary: #4D1A59
*/
body {
    font-family: "Roboto", sans-serif;
    background: url("../images/bgfloral.svg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom right;
    position: relative;
}
.rowbg {
    background: #f6fdeb;
    padding: 15px 0;
}
.margin-bottom {
    margin-bottom: 4rem;
}
@media (max-width: 768px) {
    .display-3 {
        font-size: 3.5rem !important;
    }
    .display-4 {
        font-size: 2.5rem !important;
    }
}
.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
/* 
----------
Contact-slider
----------
*/
.contactfield {
    position: fixed;
    top: 40%;
    left: -300px;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}
.contactfield:hover {
    left: 0px;
}
.contactfield div {
    float: left;
    background: #84a651;
    box-shadow: 5px 5px 20px rgba(17, 17, 17, 0.15);
}
.hidden-part {
    width: 300px;
    text-align: center;
    padding: 50px 0;
    color: white;
    font-size: 1.4em;
    border-bottom-right-radius: 0.3em;
}
.hidden-part div:first-child {
    transform: translateY(-50%);
}
.visible-part {
    padding: 20px 5px;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

/* 
----------
NAVBAR 
----------
*/
@media (min-width: 768px) {
    #navbarNav li a {
        margin: 0 15px;
        border-radius: 1.4em;
        line-height: 1em;
        border: 2px solid transparent;
        padding: 10px;
        transition: all 0.2s ease-in-out;
    }
    #navbarNav li a:hover {
        border: 2px solid white;
        background: #749247;
    }
    #navbarNav .active {
        border: 2px solid white;
    }
}
.headbg {
    background: #84a651;
    color: white !important;
    padding: 20px 15px !important;
    box-shadow: 0px 5px 20px rgba(17, 17, 17, 0.15);
}
.navbar a {
    color: white !important;
}
.navbar-toggler {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.navbar-toggler:focus,
.navbar-toggler:hover {
    color: white !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
/* 
----------
Slider
----------
*/
.carousel {
    display: none;
}
@media (min-width: 768px) {
    .carousel {
        display: block;
    }
}
.carousel-content {
    width: 100vw;
    height: 44vw;
    color: red;
    background-size: cover !important;
}
.slide1 {
    background: url("img/bgslide1.jpg");
}
.slide2 {
    background: url("img/bgslide2.jpg");
}
.slide2 a {
    background: #5f3875;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translate(-50%);
}
.slide2 a:hover {
    cursor: pointer;
    background: #442854;
    transform: translate(-50%) scale(1.1);
    color: white;
}
.slide3 {
    background: url("img/bgslide3.jpg");
}
.slide3 a {
    background: white;
    color: #2e2e2e;
    text-align: center;
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translate(-50%);
}
.slide3 a:hover {
    cursor: pointer;
    background: #c3c3c3;
    transform: translate(-50%) scale(1.1);
    color: #2e2e2e;
}
.slide4 {
    background: url("{{img/bgslide4.jpg}}");
}

.acidlist {
    list-style: circle;
}
.intro-text {
    font-size: 1.2em;
}
/* 
----------
Ornament
----------
*/
.ornament {
    margin: 0 auto;
    display: none;
}
.ornament:before,
.ornament:after {
    content: "";
    height: 1em;
    vertical-align: bottom;
    border-top: 1px solid black;
    display: inline-block;
    width: 20%;
}
.ornament:before {
    margin-left: -100%;
    margin-right: 10px;
}
.ornament:after {
    margin-right: -100%;
    margin-left: 10px;
}

.row-list h1 {
    display: block;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid black;
}
/* 
----------
Cennik-zabiegi
----------
*/
.price-list {
    position: relative;
}
.price-list ul {
    list-style: none;
    padding-left: 0;
}
.price-list li {
    padding: 10px;
    position: relative;
    border: 1px solid #445923;
    border-bottom: none;
    transition: all 0.2s;
}
.price2 {
    display: block;
    background: #84a651;
    color: white;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.2s;
    width: 65px;
    text-align: right;
}
.price-list li:nth-child(2n) {
    background: #dff7ba;
}
.price-list li:last-child {
    border-bottom: 1px solid #445923;
}
.price-list li:hover {
    background: #cbf28f;
}
.price-list li:hover .price2 {
    background: #445923;
}

/* Cennik button & modal */
.cennikbg {
    color: white;
    background: #84a651;
    border-radius: 0.3rem;
    border: none;
    transition: all 0.2s ease-in-out;
    padding: 15px 30px;
    cursor: pointer;
}
.cennikbg:hover {
    transform: scale(1.1);
    background: #445923;
}
.modal-body .price-list ul {
    margin-bottom: 2rem;
}
/* 
----------
Gift cards kosmetyka-szczawno.pl
----------
*/
.giftcards {
    color: white;
    background: #84a651;
    padding: 20px 0;
}
@media (min-width: 1200px) {
    .giftcards {
        background-image: url("../images/bgfloral2.svg");
        background-repeat: no-repeat;
        background-position: top left;
    }
}
/* 
----------
footer
----------
*/
footer {
    position: absolute;
    width: 100%;
    line-height: 60px;
    background-color: #f5f5f5;
}