:root {
    --fh: calc(50vh - 66px);
}
a:active, a:focus, a:hover {
    outline: 0
}
body {
    padding-top:50px;
}


/*["2b2d42","8d99ae","edf2f4","ef233c","d90429"]*/

body, html {
    height: 100%;
    min-height: 100%;
    font-weight: 400;
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    background-color: #edf2f4
}

.animatedParent{overflow: hidden}

h1,h2,h3,h4,h5,h6{
    font-family: 'Audiowide', cursive;
}


a{color:#d90429}

img {
    max-width: 100%
}

footer{background:#2b2d42; color:#fff; padding: 10px 0; margin-top: 1rem;}

.input-group-text{min-width: 90px;}
.sortable {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.sortable li {
    margin: 5px
}

.sortable li:hover {
    background: #edf2f4
}

.sortable li .sort-handle {
    margin-top: 25%
}

.sortable .ui-sortable-placeholder {
    padding: 20px;
    display: block;
    border: 2px dashed #ccc;
    visibility: visible !important
}

.sortable li img{max-height: 120px}

.sortable.realizacje li {
    width: 25%;
    float: left;
    height: 130px;
    margin: 0
}

.sortable.oferta li {
    width: 49%;
    float: left;
    margin: 0;
    min-height: 250px;
}



.navbar{padding: .25rem 1rem}
.navbar-brand{white-space: normal; color:#d90429 !important; padding: 0; margin: 0 1rem; font-size:1.3rem; text-transform: uppercase;font-family: 'Audiowide', cursive;}
.navbar-brand > span{color:#8d99ae}
.navbar-light .navbar-nav{width:calc(75% - 95px - 2rem); justify-content: space-around; margin: auto}
.navbar-light .navbar-nav .nav-link{font-size:1.3rem; font-weight: 500; transition: all linear 0.4s; text-transform: uppercase; }
.navbar-light .navbar-nav .nav-link:hover{ color: #8d99ae;}
.navbar-light .navbar-nav .nav-item{position: relative;}
.navbar-light .navbar-nav .btn{position: absolute; top:-5px; right: -10px;}
.logo{white-space: normal; color:#d90429 !important; padding: 0; margin: 0 1rem; font-size:1.3rem; text-transform: uppercase;font-family: 'Audiowide', cursive;}
.logo>span{color:#8d99ae}


section:not(#o-firmie){padding: 3rem 0; }
section h2{
    padding: 1.3rem 0 1.6rem;
    font-size: 1.5rem;
    color: #3D3D3F;
    letter-spacing: 0.24px;
    text-align: center;
    text-transform: uppercase;
}



#slider-1.carousel .carousel-item {height: var(--fh); background-position: center bottom; background-size: cover}
#slider-1.carousel:after{
    content:'';
    z-index: 1000;
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: var(--fh) solid transparent;
    border-bottom: 0 solid transparent;

    border-right:10vw solid #edf2f4;
}
#slider-1 .carousel-indicators{
    left:auto;
    margin-right:0px;
    margin-left:0px;
    z-index: 1001;
    width: 10vw;
}
#slider-1 .carousel-indicators li{
    border:1px solid #ccc;
    width:14px;
    height:14px;
    border-radius: 50%;
    opacity: 1;
}
#slider-1 .carousel-indicators li.active{
    background: #2b2d42;
    border:1px solid #2b2d42;
}



.fh{
    height: var(--fh);
}

.sq-bg{
    width:20%;
    padding-top: 20%;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sq-bg:hover{transform: scale(1.05)}

.sq-bg-lg{
    margin: 2%;
    width:96%;
    padding-top: 96%;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    transition: all linear 0.3s;
}

.sq-bg-lg:hover{transform: scale(1.05)}

.sq-bg-lg .price{position: absolute; top:30px; left: 0; padding: 5px 10px; background: #d90427e0; color:#fff} 

#oferta{
    background-color: #fff;
    min-height: 25vh;
    padding-bottom: 0 !important;
}
#oferta h2{ color: #2b2d42;}

#oferta h5{text-align: center; font-size:1.1rem}

#kontakt .media img{width: auto; max-height: 64px;}

.ofertadd{background-color:#8d99ae}

.ofertaadd-bg{height: var(--fh); background-repeat: no-repeat; background-size: cover; }
.ofertaadd-bg:after{
    content:'';
    z-index: 1000;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: var(--fh) solid transparent;

    border-left:10vw solid #8d99ae;
}


.map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
    margin-top:-2px;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

#kontakt form textarea{height: 200px}
#kontakt form .btn{ height: 55px;}
#kontakt form .g-recaptcha { transform:scale(0.75); transform-origin:0 0;}



@media (max-width: 768px) {
    .navbar-light .navbar-nav .nav-link{text-align: center}
    .navbar-brand{margin: 0 0 0 -10px}
    .navbar-light .btn-outline-danger{margin-left:-20px; opacity: 0.75}
    .navbar-toggler{padding: .5rem .75rem}
    #o-firmie{text-align: center}
    #slider-1.carousel:after{display: none}
    #realizacje .sq-bg{width: 33%;padding-top: 33%;}
    #realizacje .animated:nth-child(10){display: none;}
    #slider-1 .carousel-indicators{width:auto; left: 0}
    #slider-2 .carousel-indicators{bottom:-50px;}
    #slider-2 .carousel-control-prev{margin-left: -15px; width:7%;}
    #slider-2 .carousel-control-next{margin-right: -15px; width:7%;}
    footer{font-size:0.8rem}
    footer svg{width:1.8rem; height: 1.8rem; margin-top:5px;}
}