/*!
Theme Name: MAT PAK
Theme URI: http://underscores.me/
Author: LEGENDARY.pl
Author URI: https://legendary.pl
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: matpak
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

MAT PAK is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html{scroll-behavior:smooth;}
html,body{
    padding:0;
    margin:0;
}
body{
    font-family: 'Poppins',Arial;
    font-weight: 300;
    font-size: 14px;
    line-height: 36px;
    color:#000;
}
strong{
    font-weight: 700;
}
a{
    color:#2ca58d;
    text-decoration: none;
}
header#masthead{
    height:130px;
    display:flex;
    justify-content: space-between;
    z-index:10;
    position:relative;
}
header div.site-branding{
    width:180px;
    line-height:130px;
}
header div.site-branding img{
    width:100%;
    height:auto;
    vertical-align: middle;
}
.content{
    margin:auto;
    width:100%;
    max-width:1400px;
    padding:0 20px;
    box-sizing: border-box;
}
nav#site-navigation ul.menu{
    margin:0;
    padding:0;
    list-style: none;
}
nav#site-navigation ul.menu li{
    float:left;
    line-height: 130px;
    vertical-align: middle;
    padding:0 0 0 40px;
}
nav#site-navigation ul.menu li a{
    text-decoration: none;
    color:#000;
    font-weight: 700;
    font-size: 16px;
}
li.menu-button a{
    background: #2ca58d;
    border-radius: 2px;
    padding: 13px 19px;
    color:#fff !important;
}

footer#colophon{
    background: #000;
    color:#a2a2a2;
    height:100px;
}
footer#colophon a{
    color:#a2a2a2;
    text-decoration: none;
}
footer#colophon div#ao-foot{
    display:flex;
    justify-content: space-between;
}
div#ao-foot div{
    line-height:100px;
    vertical-align: middle;
}

h1.entry-title{
    font-size:60px;
    line-height: normal;
    margin: 34px 0 25px 0;
    padding:0;
}

div#ao-mp{
    height:790px;
    width:100%;
    position: relative;
}
div#ao-mp-content{
    position:absolute;
    width:100%;
    max-width: 390px;
    top:50%;
    transform: translateY(calc(-50% - 40px));
}
div#ao-mp-content h1{
    font-size:60px;
    font-weight: 700;
    margin: 0 0 43px 0;
    padding:0;
}
div#ao-mp-content h2{
    font-size:18px;
    font-weight: 700;
    margin: 0 0 60px 0;
    padding:0;
}
div#ao-mp-content ul{
    padding:0;
    margin:0;
    list-style: none;
}
div#ao-mp-content ul li{
    float:left;
    padding:0 33px 0 0;
}
div#ao-mp-content ul li a{
    color:#000;
    font-weight: 700;
    font-size:16px;
}

#ao-slider-wrap{
    position:absolute;
    background: #f2f1f7;
    width:calc(50% + 90px);
    height:920px;
    top:0;
    left:calc(50% - 90px);
    z-index:1;
    border-radius: 0 0 0 50px;
}
#ao-slider{
    height:100%;
    width:1050px;
    overflow:hidden;
    position:relative;
    border-radius: 0 0 0 50px;
}
#ao-slider-content{
    height:100%;
    position:absolute;
}
.ao-slide{
    width:1050px;
    height:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    float:left;
}
#ao-slide-left{
    width:68px;
    height:68px;
    background:url(/wp-content/themes/matpak/assets/arr-left.svg) center center no-repeat;
    background-size:cover;
    position:absolute;
    top:705px;
    left:-34px;
    cursor: pointer;
    z-index:20;
}
#ao-slide-right{
    width:68px;
    height:68px;
    background:url(/wp-content/themes/matpak/assets/arr-right.svg) center center no-repeat;
    background-size:cover;
    position:absolute;
    top:705px;
    left:32px;
    cursor: pointer;
    z-index:20;
}

.ao-mp{
    margin-top:90px;
    scroll-margin-top:150px;
}
.ao-mp h2{
    font-size:36px;
    margin:0 0 43px 0;
}
#nasza-oferta h2{
    text-align:center;
}
#offer div{
    width:25%;
    padding: 0 20px 0 0;
    box-sizing: border-box;
    display:inline-block;
    text-align: left;
    margin:20px 0;
    vertical-align:top;
}
#offer div img{
    height:90px;
    width:auto;
}
#offer div h3{
    padding:0;
    margin: 36px 0 26px 0;
    font-size:24px;
    line-height: normal;
}
#offer div p{
    margin:0;
    padding:0;
}
#offer div a.more{
    display:block;
    font-size: 16px;
    margin-top: 15px;
}
.grey-bg{
    background: #f2f1f7;
    z-index:1;
}
#o-firmie{
    position:relative;
    width:100%;
}
#o-firmie .grey-bg{
    position:absolute;
    width:calc(50% - 200px);
    height:100%;
    top:0;
    left:0;
}
#o-firmie .content{
    display: flex;
    justify-content: space-between;
    z-index:10;
}
.about-img{
    width: calc(50% - 90px);
    z-index:10;
    border-radius: 0 50px 0 50px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.about-txt{
    width: calc(50% - 10px);
    z-index:10;
}
#co-nas-wyroznia{
    display: flex;
    justify-content: space-between;
}
#co-nas-wyroznia > div{
    width:calc(50% - 10px);
}
#co-nas-wyroznia > div:first-of-type{
    width:calc(50% - 50px);
}
div.feature{
    width:300px;
    padding-right:10px;
    box-sizing: border-box;
    display:inline-block;
    margin: 0 0 30px 0;
}
div.feature img{
    height:58px;
    width:auto;
    margin-left: 5px;
}
div.feature h3{
    margin:0;
    padding:0;
    font-size:24px;
    line-height: normal;
}
#nasi-klienci{
    text-align:center;
}
.client-wrap{
    width:100%;
    max-width:910px;
    padding: 0;
    margin:auto;    
}
.client{
    display: inline-block;
    margin: 0 18px 36px 18px;
    border: 2px solid #000;
    width: 260px;
    height:100px;
    background-size: 55%;
    background-position: center center;
    background-repeat: no-repeat;
}
#kontakt{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}
#contact-text h3{
    font-size:30px;
    margin:0 0 5px 0;
    padding:0;
    line-height: normal;
}
#contact-text p{
    font-size:24px;
    line-height: 26px;
    padding:0;
    margin:0;
}
#contact-text a{
    display: table;
    font-size: 20px;
}
#contact-mail{
    padding: 0px;
    margin: 43px 0 28px 0;
    color:#2ca58d;
}
#contact-phone{
    border: 2px solid #2ca58d;
    border-radius: 2px;
    padding: 3px 15px;
    color: #2ca58d;
}
#contact-form{
    font-weight: 300;
    padding: 0 55px;
    font-size: 11px;
    position: relative;
}
#contact-form div.wpcf7{
    z-index: 10;
    position: relative;
}
#contact-form span{
    font-weight: 700;
    font-size: 14px;
}
#contact-form input:not([type='checkbox']):not([type='submit']), #contact-form textarea{
    font-family: 'Popins', Arial;
    color:#000;
    font-size: 14px;
    font-weight: 300;
    border: 2px solid #000;
    padding: 30px;
    width: 496px;
    box-sizing: border-box;
    background: transparent;
}
#contact-form input[type='checkbox']{
    margin-left: 0;
    padding: 0;
}
#contact-form input[type='submit']{
    border: 0 none;
    border-radius: 2px;
    background: #2ca58d;
    color:#fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 29px 60px;
    cursor: pointer;
    font-size: 20px;
}
#contact-form .wpcf7-list-item{
    margin:0 !important;
}
#contact-form .grey-bg{
    position:relative;
    overflow:hidden;
    top:0;
    left:0;
    border-radius: 0 50px 0 50px;
    /* height: calc(100% - 87px); */
    line-height:0;
    width:600px;
}
.wpcf7-response-output{
    background: #ffb900;
}

#offer_products{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:13px;
    margin: 30px 0 50px 0;
}
.prod{
    box-sizing: border-box;
    background: #000;
}

.prod_img{
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    border:1px solid #000;
}
.prod_img > .aspect_ratio{
    padding-top:61.45%;
}
.prod_desc{
    color:#fff;
    padding: 30px 18px;
    font-weight: 700;
}

#offer_materials{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap:0px;
    margin: 10px 0 30px 0;
}
.material{
    box-sizing: border-box;
    background: #f2f1f7;
}
.material_img{
    width:51.32%;
    float:left;
    border:1px solid #f2f1f7;
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    box-sizing:border-box;
}
.material_img > .aspect_ratio{
    padding-top:71.7%;
}
.material_desc{
    width:48.68%;
    box-sizing:border-box;
    float:left;
    font-weight: 700;
    position: relative;
    height:100%;
}
.material_desc >div{
    text-align:center;
    width:100%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

#rwd-menu{width:36px;height:21px;position:relative;margin:30px 0 29px 0;cursor:pointer;display: none;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  -webkit-tap-highlight-color: transparent;}

#rwd-menu span{display:block;position:absolute;height:3px;width:100%;background:#2ca58d;opacity:1;right:0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#rwd-menu span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

#rwd-menu span:nth-child(2) {
  top: 9px;
  width:26px;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

#rwd-menu span:nth-child(3) {
  top: 18px;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

#rwd-menu.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -5px;
  left: 0px;
}

#rwd-menu.open span:nth-child(2) {
  width: 0;
  opacity: 0;
}

#rwd-menu.open span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 21px;
  left: 0px;
}

.rwd-on{display:none;}

@media(max-width:1024px){
    .rwd-on{display: block;}
    .rwd-off{display:none;}
    #rwd-menu{
        display:block;
        z-index:20;
    }
    header#masthead{
        height:80px;
    }
    header div.site-branding{
        width:92px;
        line-height:80px;
        z-index:20;
    }
    .menu-main-menu-container{
        position:absolute;
        width:100%;
        top: -320px;
        left:0;
        padding-top:80px;
        background:#fff;
        width:100%;
        box-shadow: 0 0 50px rgba(0,0,0,.2);
        z-index:1;
        -webkit-transition: .2s ease-in-out;
        -moz-transition: .2s ease-in-out;
        -o-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }
    .menu-main-menu-container.open{
        top:0;
    }
    nav#site-navigation ul.menu{
        border-top: 2px solid #2ca58d;
        padding: 5px 0;
    }
    nav#site-navigation ul.menu li{
        float: none;
        padding:0 0 0 20px;
        line-height:27px;
    }
    nav#site-navigation ul.menu li a{
        font-size:14px;
        
    }
    nav#site-navigation ul.menu li.menu-button{
        line-height: unset;
        padding: 12px 0px 17px 20px;
    }
    li.menu-button a{
        padding: 11px 17px;
    }
    h1.entry-title{
        font-size: 30px;
        margin: 22px 0 15px 0
    }
    #ao-slider-wrap{
        position: relative;
        left: 0;
        width: 100%;
        height:auto;
    }
    #ao-slider{
        width:100%;
        padding-top: 56.25%;
    }
    #ao-slider-content{
        top:0;
    }
    #ao-slide-left,#ao-slide-right{
        width: 45px;
        height: 45px;
        top:unset;
        bottom:-22px;
    }
    #ao-slide-left{
        left:calc(50% - 45px);
    }
    #ao-slide-right{
        left:calc(50% - 2px);
    }
    .ao-mp h2{
        margin:0 0 17px 0;
        font-size: 24px;
    }
    div#ao-mp{
        height: unset;
        overflow: hidden;
    }
    div#ao-mp-content{
        position: relative;
        top: 0;
        transform: unset;
        width: 100%;
        margin: auto;
        text-align: center;
        padding-top:60px;
    }
    div#ao-mp-content ul li{
        float:none;
        display: inline-block;
        margin:auto;
    }
    #offer div{
        display: block;
        width: 100%;
        text-align: center;
        padding:0;
    }
    #offer div h3{
        margin: 0;
    }
    #o-firmie .content{
        display: block;
        padding:0;
    }
    #o-firmie .content h2{
        text-align:center;
    }
    #o-firmie .grey-bg{
        display: none;
    }
    .about-img{
        width:100%;
    }
    .about-img .rwd-on{
        padding-top:56.25%;
    }
    .about-txt{
        width:100%;
        padding:0 20px;
        box-sizing: border-box;
    }
    #co-nas-wyroznia{
        display: block;
    }
    #co-nas-wyroznia > div,#co-nas-wyroznia > div:first-of-type{
        width:100%;
    }
    div.feature{
        width:50%;
        margin:0 0 20px 0;
        padding-right: 30px;
    }
    .client{
        width:150px;
        height:57px;
        margin: 0 18px 12px 18px;
    }
    #kontakt{
        display: block;
    }
    #contact-text{
        width:100%;
        text-align:center;
        padding-bottom:30px;
    }
    #contact-mail{
        margin:30px auto 10px auto;
    }
    #contact-phone{
        margin:auto;
        padding: 3px 5px;
    }
    #contact-form{
        width:100%;
        box-sizing: border-box;
        padding:0;
    }
    #contact-form .grey-bg{
        width:100%;
    }
    #contact-form input:not([type='checkbox']):not([type='submit']), #contact-form textarea{
        width:100%;
        padding: 18px;
    }
    footer#colophon div#ao-foot{
        display: block;
    }
    footer#colophon{
        height:auto;
        padding: 20px 0;
        text-align: center;
    }
    div#ao-foot div{
        line-height: normal;
    }
    
    body{
        font-size: 12px;
        line-height: 24px;
    }
    div#ao-mp-content h1{
        font-size: 30px;
    }
    div#ao-mp-content h2{
        font-size:14px;
        line-height:24px;
        margin:0 0 27px 0;
    }
    #offer div h3{
        font-size:18px;
    }
    #offer div img{
        height:70px;
    }
    div.feature img{
        height:46px;
    }
    div.feature h3{
        font-size:16px;
    }
    .ao-mp{
        margin-top:30px;
        scroll-margin-top: 50px;
    }
    #contact-text h3{
        font-size: 18px;
    }
    #contact-text p{
        font-size: 16px;
        line-height: normal;
    }
    #contact-text a{
        font-size: 14px;
    }
}