@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Hind');

body {
    font-family:"Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image:url("../images/samuel-zeller-17557.png");
    background-repeat:no-repeat;
    background-size:contain;
}

h1 {
    font-weight:600;
    font-family: "Montserrat", sans-serif;   
}

h2 {
    font-size:4.8rem;
    margin:0;
}

h3 {
    font-size:2rem;
    color:rgba(0, 153, 255,1);
    text-transform:uppercase;
    margin:0;
}

h4 {
    font-size:1.414rem;
    color:rgba(0,0,0,0.75);
    white-space: nowrap;
}

p, li {
    font-family:"Hind",sans-serif;
    font-size:0.875rem;
}

small {
    color:rgba(255,255,255,0.75);
}

.ryby {
    font-weight:400;
}

.com {
    font-weight:100;
}

section {
    margin-bottom:5vh;
}

/*CONTAINER*/

.container {
    display:grid;
    grid-template-columns: repeat(12,1fr);
    align-items:center;
    width:95%;
    margin:0 auto;
}

.header-container {
    height:15vh;
    color:rgba(255,255,255,0.75);
}

.jumberton-container {
    height:85vh;
    color:rgba(255,255,255,0.75);
}

.o-nas-container, .assortyment-container, .opportunity-container {
    grid-gap:1rem;
}

.kontakt-container {
    width:100%;
}

.kontakt-block-container {
    width:75%;
    justify-self:right;
    align-self:center;
    text-align:right;
    margin-right:2rem;
}

.contact-info-container {
    grid-gap:2rem;
}

/*END CONTAINERS*/

header {
    background-image:linear-gradient(rgba(51,102,153,0.5),rgba(51,153,255,0.5));
}

.logo {
    grid-column:span 3;
}

a {
    text-decoration:none;
}

h1 a, footer a {
    color:rgba(255,255,255,0.75);
}

.menu a {
    margin-right:1rem;
    text-transform:uppercase;
    color:rgba(255,255,255,0.75);
}

.contact-info-block a {
    color:rgba(0,0,0,0.75);
}



.menu {
    grid-column:span 7;
    justify-self:end;
}

.call-me {
    grid-column:span 2;
    justify-self:end;
    white-space:nowrap;
}

/*BUTTONS*/

.btn {
    background-color:royalblue;
    color:rgba(255,255,255,0.75);
    border:none;
    padding:0.5rem 1rem;
    margin:1rem 0;
    cursor:pointer;
}

.o-nas-block .btn {
    justify-self:start;
}

.opportunity-container .btn, .assortyment-container .btn {
    grid-column:span 12;
    justify-self:center;
}

.kontakt-block-container .btn {
    color:rgba(0, 153, 255,1);
    background-color:rgba(255,255,255,0.75);
}

.kontakt-block-container .divider {
    background-color:rgba(255,255,255,0.75);
}

.footer-container {
    height:15vh;
}

/*END BUTTONS*/

.jumberton {
    background-image:linear-gradient(rgba(51,153,255,0.5), rgba(51,102,153,0.5)), url("../images/samuel-zeller-17557.png");
}

.section-title {
    grid-column:span 12;
    justify-self:center;
    align-self:center;
    text-align:center;
}

.o-nas-block {
    grid-column:span 6;
    padding:0 1rem;
    min-height:50vh; 
    display:grid;
    align-content:space-between;  
}

.assortyment-block {
    grid-column:span 12;
}

.opportunity-block {
    grid-column:span 4;
    text-align:center;
    display:grid;
    align-content:space-between;
    justify-items:center;
}

.kontakt-block {
    grid-column:span 6;
    display:grid;
    min-height:28rem;  
}

.map-block {
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
    position:relative;
    left:0;
    width:112.5%;
      
}

.footer-block {
    grid-column:span 6;
}

.kontakt-block:nth-child(2) {
    background-color:rgba(0, 153, 255,1);
    color:rgba(255,255,255,0.75);
    padding:0 1rem;
    clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
    position:relative;
    left:-5%;
    width:105%;
    
}


.o-nas-block:nth-child(2) {
    align-content:end;
    justify-content:end;
    background-image:linear-gradient(rgba(51,153,255,0.5), rgba(51,102,153,0.5)),url("../images/sklep-back.png");
    background-size:cover;
}

.o-nas-block:nth-child(2) h3 {
    margin:1rem;
    color:rgba(255,255,255,0.75);
}



.divider {
    background-color:rgba(153,153,153,1);
    height:2px;
    width:10%;
    margin:0.5rem 0;
}

.phone {
    margin:0.5rem 0;
    font-size:1.414rem;
    font-weight:600;
    color:rgba(0, 153, 255,1);
}

.info {
    width:50%;
    margin:0 auto;
    text-align:center;
}

.slider-item {
    width:10rem;
    height:10rem;
    background-color:rgba(51,102,153,0.5);
    background-image:linear-gradient(rgba(51,153,255,0.5), rgba(51,102,153,0.5)),url("../images/samuel-zeller-17557.png");
    background-size:contain;
}

.slider-item-container {
    display:grid;
    min-height:10rem;
    align-items:center;
    justify-items:center;
}

.slick-slide {
    margin:0 1rem;
}

.slider {
    width:95%;
    margin:0 auto;
}

.circle {
    width:10rem;
    height:10rem;
    border:solid rgba(0, 153, 255,1) 2px;
    border-radius:50%;
}

.circle:hover {
    background-color:rgba(0, 153, 255,1);
}

iframe {
    filter: grayscale(90%);
    width:100%;
}

.kontakt-block h3 {
    color:rgba(255,255,255,0.75);
}

ul {
    padding:0;
}

li {
    list-style:none;
    margin:1rem 0;
}

.contact-info-block {
    grid-column:span 3;
}

footer {
    background-color:rgba(0,0,0,0.75);
}

.footer-block:nth-child(2) {
    justify-self:end;
}

footer small {
    text-transform:uppercase;
}

img {
    width:100%;
}

figure {
    position:relative;
    top:1rem;
    left:0.5rem;
}


.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.hamburger {
    font-size:2rem;
    cursor:pointer;
    justify-self:center;
}


@media screen and (max-width: 768px) {
    .o-nas-block {
        grid-column:span 12;
    }

    .info {
        width:75%;
    }

    .divider {
        margin:0 auto;
    }

    .o-nas-block {
        text-align:center;
    }

    h3 {
        margin-bottom:0.5rem;
    }

    .o-nas-block .btn {
        justify-self:center;
    }

    .contact-info-block {
        grid-column:span 6;
        text-align:center;
    }

    .logo, .hamburger, .call-me {
        grid-column:span 4;
    }

    .menu {
        display:none;
    }

    .com {
        display:none;
    }
}

@media screen and (max-width: 600px) {
    .opportunity-block {
        grid-column:span 12;
    }

    .logo {
        grid-column:span 12;
        justify-self:center;
    }

    .hamburger, .call-me {
        grid-column:span 6;
    }
}

@media screen and (min-width: 769px) {
    .hamburger {
        display:none;
    }
}