@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Noto+Sans:400,700&display=swap&subset=latin-ext');

:root {
    --fh: calc(100vh - 66px);
}
a:active, a:focus, a:hover {
    outline: 0
}
body,html {
    background-color: #fff
}


body, html {
    height: 100%;
    min-height: 100%;
    font-weight: 400;
    font-family: "Noto Sans", sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    /*font-family: 'Noto Sans', sans-serif;*/
    font-size: 15px;

}

.animatedParent{overflow: hidden}



h1 {
    position: relative;
    left: auto;
    padding: 0;
    font-size: 14px
}

h1 a {
    left: 10px;
    position: absolute;
    display: block;
    background-image: url(../img/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 80%;
    transition: all linear .5s
}

a{color:#CF1D00}

img {
    max-width: 100%
}

footer{background:#CF1D00; 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: #f2f2f2
}

.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{width: 95px; white-space: normal; font-size:13px; font-weight: 900; text-align: center; padding: 0; margin: 0 1rem}
.navbar-brand img{height: 40px; clear: right}
.navbar-brand > span{width:100%;clear: both}
.navbar-light .navbar-nav{width:calc(75% - 95px - 2rem); justify-content: space-around; margin: auto}
.navbar-light .navbar-nav .nav-link{font-size:1.4rem; font-weight: 500; transition: all linear 0.4s; font-family: 'Roboto', sans-serif; }
.navbar-light .navbar-nav .nav-link:hover{ color: #CF1D00;}

section{min-height: 75vh; }
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;
}

#o-firmie{background: #f9f9f9}
#o-firmie h2{  color: #CF1D00;   font-weight:300; font-family: 'Roboto', sans-serif; font-size: 2em;}
#o-firmie h4{  color: #CF1D00; font-weight: bold; text-transform: uppercase; margin-top:30px}
#o-firmie span[style*="large"]{ color: #CF1D00; font-size: 2em!important; font-weight:300; font-family: 'Roboto', sans-serif;}
.copy{text-align: center}

#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:15vw solid #f9f9f9;
}
#slider-1 .carousel-indicators{
    left:auto;
    margin-right:0px;
    margin-left:0px;
    z-index: 1001;
    width: 15vw;
}
#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: #CF1D00;
    border:1px solid #CF1D00;
}

#slider-2.carousel .carousel-item {min-height: 35vh; text-align: center}
#slider-2.carousel .carousel-item .d-flex{min-height: 35vh; font-style: italic}
#slider-2.carousel .carousel-item .d-flex blockquote{font-size:1.2em; font-weight: bold}

.fh{
    height: var(--fh);
}
.zabytki-bg{height: var(--fh); background-repeat: no-repeat; background-size: cover}
.zabytki-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:15vw solid #f9f9f9;
}

.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{
    width:55%;
    padding-top: 45%;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#opinie{
    color: #fff;
    background-image: url(../img/opinie.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 25vh;
}
#opinie h2{ color: #fff;}

#oferta .col-sm-6{text-align: center; padding-bottom: 1rem}
#oferta .col-sm-6 h3{ font-family: 'Roboto', sans-serif; font-weight:500; font-size: 1.1rem; color: #CF1D00; text-transform: uppercase; padding: .75rem 0}
#oferta .col-sm-6 p{}

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

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