/*!
Theme Name: Theme
Theme URI: http://underscores.me/
Author: SocialUp!
Author URI: http://underscores.me/
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: 
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.

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



/* Global
--------------------------------------------- */

:root {
    --main-font: 'Raleway', sans-serif;
    --white:  rgba(255, 255, 255, 1);
    --black:  rgba(0, 0, 0, 1);
    --beige:  rgba(242, 240, 236, 1);
    --very-light-gray:  rgba(248, 248, 248, 1);
}


body{
    font-family: var(--main-font);
}

section{
    position: relative;
}

a{
    text-decoration: none;
}

a:hover{
    color: var(--black);
}

a:visited{
    color: inherit;
}

h1{
    color: var(--font-black);
    font-weight: 900;
}

.single h1, .page-template h1, .privacy-policy h1{
    font-size: 65px;
    font-weight: 600;
    color: var(--white);
}

h2{

    font-weight: 900;
    text-align: center;
    font-size: 3rem;
    position: relative;
}


a{
    color: var(--black);
}


h3{
    color: var(--black);
    text-align: center;
    letter-spacing: 55px;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 33px;
}

h4{
    font-weight: 400;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--black);
}


.hero-image {
    position: relative;
    min-height: 500px;
    background-position: 50% 15%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}


.post, .page {
    margin: 0px;
}


.portfolio-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all .4s ease-in-out 0s;
    -moz-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    background-color: var(--beige);
    border-radius: 35px 0 0 35px;
}

.portfolio-box:hover .portfolio-overlay {
    opacity: 0.9;

}

.portfolio-box--title{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0px;
    color: var(--black);
    font-size: 20px;
    font-weight: 500;
    padding: 20px;
    border: 3px solid var(--very-light-gray);
}



.hero-image-header{
    display: flex;
    justify-content: center;
    align-items: center;
}



.container, .row{
    height: 100%;
    position: relative;
}

.button{
    background-color: var(--beige);
    color: var(--black);
    transition: background .3s ease-in-out;
    font-weight: 500;
    padding: 10px 30px;
}

.button-menu{
    padding: 0px;
}

.button a, a.button:visited{
    color: var(--black);
    transition: color .3s ease-in-out;
}

.button:hover{
    color: var(--black)!important;
    background: var(--white)!important;
    transition: background .3s ease-in-out;
}

.button:hover a{
    color: var(--black)!important;
}

b, strong{
    font-weight: 900;
}

.separator{
    width: 100%;
    height: 2px;
    background: var(--white);
}

.site-footer--grid-socials img{
    width: 40px;
}


body hr{
    height: 6px!important;
    max-width: 200px;
    opacity: 1;
    margin: 8px 0px 25px 0px;
    border-radius: 10px;
    background: var(--beige);
}

.btn-check:focus+.btn, .btn:focus, button:hover{
    box-shadow: none!important;
    border: none!important;
}

p{
    font-weight: 300;
    line-height: 1.6;
}


/* Header
--------------------------------------------- */


header{
    position: fixed;
    width: 100%;
    z-index: 9;
    top: 0;
}

.site-header.sticky{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 100;
    background-color: var(--white);
    will-change: background-color;
    transition: background-color .3s ease-in-out;
}


.site-header .site-header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .site-header-row .main-navigation{
    background: var(--white);
    padding: 20px 0px 20px 20px;
        border-radius: 0px 0px 0px 20px;
}

.site-header .site-header-row .site-branding, .site-header .site-header-row .main-navigation  {
       width: auto;
}

.site-header .site-header-row .site-branding img{
    width: 180px;
    margin: 0px;
    padding: 0px 15px;
}

.site-header .site-header-row .site-branding-black{
    display: none;
}

.site-header.sticky .site-branding img{
    width: 180px;
}

.site-header.sticky .site-header-row .site-branding-white{
    display: none;
}

.site-header.sticky .site-header-row .site-branding-black{
    display: block;
}

.site-header .main-navigation ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-header .main-navigation ul li{
   
}

.site-header .main-navigation ul li a{
    color: var(--black);
    padding: 10px 20px;
    display: block;
    width: 100%;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 14px;
}

.site-header .main-navigation ul li.button a{
    color: var(--white);
    font-weight: 900;
}

.site-header .main-navigation ul li:hover{
    background: var(--beige);
    transition: background .3s ease-in-out;
}


.site-header .main-navigation ul li:hover a{
    color: var(--black);
    transition: color .3s ease-in-out;
}

.site-header .main-navigation ul.sub-menu li:hover{
    background: var(--white);
}

.site-header .main-navigation .sub-menu{
    background: var(--white);
    display: flex;
    flex-direction: column;
    border-radius:  12px;
    width: 300px;
}

.site-header .main-navigation ul li:hover .sub-menu a{
     color: var(--black);
}

.site-header .main-navigation ul li:hover .sub-menu li a:hover{
     color: var(--beige);
}


/*  Strona Główna
--------------------------------------------- */


section#hero{
    height: 60vh;
    min-height: 500px;
}

section#hero h1{
    font-size: 50px;
}

section#hero .hero-text{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

section#hero .hero-img img{
    object-position: 50% 50%;
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-height: 900px;
    left: -100px;
    width: 65%;
    position: absolute;
 
}

#hero h4{
    letter-spacing: 0.18rem;
    font-size: 1rem;
    text-transform: uppercase;
}


section#about{
    padding: 80px 0px;
    text-align: left;

}


section#about .about{
    margin-top: -180px;
    padding: 70px 50px;
        background: var(--very-light-gray);

}

section#about .about strong{
        font-size: 1.4rem;
        line-height: 1.6;
}


section#about .about-photo img{
    object-fit: cover;
    border-radius: 60px 0px 0px 60px;
    width: 100%;
    object-position: 90% 100%;
}



section#about .about-text{
    padding: 0px 50px;
    text-align: justify;
}


section#about .about-text h2{
   text-align: left;
}



section .services{
    padding: 60px 0px;
    
}


section .services span{
    color: var(--black);
}

section .services .services-list{
    margin: 50px 0px 30px 0px;
}


section .services .services-list .services-list--header{
    max-width: 75%;
    margin: 0 auto;
}

section .services .services-list-grid-item{
    text-align: center;
    aspect-ratio: 1.5;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    max-width: 280px;
    margin: 0 auto;
    -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
    border: 6px solid var(--beige);
    background: var(--white);
    position: relative;
}

section .services .services-list-grid-item:hover{
    border: 20px solid var(--beige);
    border-radius: 20px;
}

section .services .services-list-grid-item span{
    opacity: 0;
     -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
    position: absolute;
    margin-top: 50px;
}

section .services .services-list-grid-item:hover span{
    opacity: 1;
     -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
}

section .services .services-list-grid-item .services-list--image{
    height: 60px;
    width: 60px;
    object-fit: contain;
    margin-bottom: 20px;

}

section#services .services-contaner-row{
    background: var(--very-light-gray);
    margin: 0rem 0rem 2rem 0rem;
    padding: 3rem 2rem;
}

section#services .services-container h4{
    font-weight: 600;
    font-size: 1.6rem;
    text-transform: inherit;
}


section#services .services-container ul{
    padding: 0;
    margin: 0;
}

section#portfolio{
    padding: 80px 0px;
}

section#portfolio h4{
    margin: 0px 0px 60px 0px;
    position: relative;
}



section#portfolio .col-md-8 .button{
    margin: 40px 0px 0px 0px;
}


section#portfolio .portfolio-slider .portfolio-box{
    aspect-ratio:  1;
    object-fit: cover;
    background-repeat: no-repeat;
    position: relative;

}

section#portfolio .portfolio-slider .slick-slide{
 margin: 0 10px;
}
/*
section#portfolio .portfolio-slider .slick-list{
margin: 0 -250px;
}
*/


section#portfolio .prev, section#portfolio .next{
    margin: 20px 5px;
}

section#portfolio .prev:before{
    content: url('/wp-content/themes/theme/assets/img/arrow_left.svg');
    width: 28px;
    height: 30px;
    display: block;
}

section#portfolio .next:before{
    content: url('/wp-content/themes/theme/assets/img/arrow_right.svg');
    width: 28px;
    height: 30px;
    display: block;
}


section#portfolio .portfolio-slider--link{
    position: relative;
}



section#portfolio .portfolio-slider .slick-slide img {
  display: block;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius:  35px 0 0 0px;
  opacity: 0.1;
  -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
}

section#portfolio .portfolio-slider--link:hover img{
    opacity: 0.2;
    -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
}

section .extra-contact{
    padding: 80px 0px 140px 0px;
}

section .extra-contact h2{
    font-weight: 900;
    position: relative;
}




section .extra-contact h2:after{
    content: "";
    display: block;
    height: 6px!important;
    border-radius: 10px;
    background: var(--beige);
    position: absolute;
    width: 100%;
    right: 0px;
    top: 30px;
    z-index: -1;
}

section .extra-contact p{
    font-size: 20px;
    margin: 30px 0px;
}


section .extra-contact h2 span{
    background: var(--white);
    padding: 30px;
}

/* Footer
--------------------------------------------- */

h3.above-footer{
    margin-bottom: 40px;
}

footer{
    padding: 70px 0px 0px 0px;
    background: var(--beige);}

footer p, footer a{
    color: var(--black);
    font-size: 13px;
    margin: 5px 0px;
}


footer .site-footer--grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

footer .first-footer-col p{
    max-width: 80%;
}

footer .copy{
    padding: 15px 0px 20px 0px;
    text-align: center;
    color: var(--font-gray);
}

footer img{
    max-width: 200px;
    margin-bottom: 20px;

}

footer h4{
    letter-spacing: 2px;
    margin-bottom: 12px;
}

footer .site-footer--grid-socials{
    display: flex;
    justify-content: center;
}



/* Single
--------------------------------------------- */

.single-offer-container{
    margin: 50px 0px 50px 0px;
}

.single-buttons{
    margin: 70px 0px;
    text-align: center;
    background: linear-gradient(-45deg,rgba(225,240,252,1),rgba(246,253,245,1),rgba(249,253,248,1),rgba(255,252,254,1),rgba(250,233,243,1));
    background-size: 1500% 1500%;
    animation: gradient 5s ease infinite;
    padding: 40px 0px;
    border-radius: 40px;
}

.single-buttons h2{
     font-weight: 900;
     margin-bottom: 20px;
     font-size: 35px;
}

.single-buttons a{
     font-weight: 900;
    padding: 10px 30px;
    width: auto;
    margin: 10px 6px;
}

.offer-template-default .site-branding-white, .page-template-template-blog .site-branding-white{
    display: none;
}

.offer-template-default .site-header .site-header-row .site-branding-black, .page-template-template-blog .site-header .site-header-row .site-branding-black{
    display: block;
}

.offer-template-default .hero-image, .page-template-template-blog .hero-image{
    margin: 81px 60px 0px 60px;
    height: 350px;
    min-height: 350px;
}

/* Blog
--------------------------------------------- */


.blog img{
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.blog .blog-element{
    margin: 20px 0px;
}

.blog .blog-element:hover img{
    opacity: 0.7;
    -webkit-transition: all 0.300s ease-in-out;
    -moz-transition: all 0.300s ease-in-out;
    transition: all 0.300s ease-in-out;
}

.blog .portfolio-box--title{
    justify-content: left;
    padding: 20px 0px;
    border: 0px;
}

.blog hr{
        margin: 25px 0px 0px 0px;
}


/* Kontakt
--------------------------------------------- */
.contact {
    padding: 150px 0px;
}

.contact h1 {
    margin-bottom: 100px;
    color: var(--black)!important;
}


.contact a{
    color: var(--black);
    margin: 0px;
}

.contact a:hover{
    color: var(--black);
}

.contact .contact-left--info---inside{
    margin-bottom: 50px;
    padding-right: 2rem;
}

.contact .contact-left--info---inside p{
   font-size: 30px;
   font-weight: 300;
   line-height: 1em;
     background: var(--very-light-gray);
  margin: 0rem 0rem 2rem 0rem;
  padding: 3rem 2rem;

}

.site-footer--grid-socials{
    text-align: center;
}


.contact .shape11-2 {
    left: -150px;
    bottom: -600px;
    z-index: -1;
}

.contact .contact-left p{
    text-align: center;
}



.page-template-template-contact .site-header .site-header-row .site-branding-white{
    display: none;
}

.page-template-template-contact .site-header .site-header-row .site-branding-black{
    display: block;
}


/* Kontakt - Contact Form 7
--------------------------------------------- */
.wpcf7-form label{
    width: 100%;
}

.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
    color: #1f252b;
    width: 100%;
    padding: 18px 18px;
    border-radius: 0;
    border:  0px;
    background: var(--very-light-gray);
    margin: 10px 0;
}
.wpcf7-form p {
    margin: 0 0 28px;
}
.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: 0px;
    outline-offset: 0;
}
div.wpcf7-mail-sent-ok {
    border: 0;
    background: #5471de;
    color: #fff;
    padding: 18px;
}
div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    border: 0;
    background: #f9443b;
    color: #fff;
    padding: 18px;
}
span.wpcf7-not-valid-tip {
    color: #f9443b;
    margin-top: 13px;
}
/* 
** Button Styles 
*/
.wpcf7-form .submit-btn {
    background-color: var(--black);
    color: var(--white);
    transition: background .3s ease-in-out;
    font-weight: 500;
    padding: 20px 40px;
    font-family: var(--main-font)!important;
    font-size: 1rem;
    border:  none;
}


.wpcf7-form .submit-btn:hover {
    cursor: pointer;
    border: 0;
}

.wpcf7-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--black);
  font-size: 16px;
  opacity: 1;
}
.wpcf7-form ::-moz-placeholder { /* Firefox 19+ */
  color: var(--black);
  font-size: 16px;
  opacity: 1;
}
.wpcf7-form :-ms-input-placeholder { /* IE 10+ */
  color: var(--black);
  font-size: 16px;
  opacity: 1;
}
.wpcf7-form :-moz-placeholder { /* Firefox 18- */
  color: var(--black);
  font-size: 16px;
  opacity: 1;
}

.wpcf7-form .wpcf7-list-item{
    margin: 30px 0px 0px 40px;
    text-align: justify;
}

.wpcf7-form .form-wrapper input.form-acceptance {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wpcf7-form .form-wrapper .wpcf7-list-item-label {
    font-size: 14px;
    color: var(--black);
    position: relative;
    text-align: justify;
}

.wpcf7-form .form-wrapper .acceptance-fieldset .wpcf7-list-item-label:before {
    content: '';
    display: inline-block;
    vertical-align: text-top;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 2px;
    left: 0;
    background-color: var(--very-light-gray);
    position: absolute;
    left: -40px;
}

.wpcf7-form .form-wrapper .acceptance-fieldset input:checked+.wpcf7-list-item-label:after {
    opacity: 1;
    position: absolute;
    left: -34px;
    top: 8px;
    background: var(--black);
    width: 11px;
    height: 11px;
}

.wpcf7-form .form-actions{
    margin: 50px 0px;
}


/* 404
--------------------------------------------- */

.error-404 .page-content{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.error-404 .page-content .button{
    margin: 20px 0px 0px 0px;
}

.workshops{
      padding: 150px 0px;
}

.workshops p{

color: var(--black);
}

.workshops h1 {
    margin-bottom: 100px;
    color: var(--black)!important;
}

.workshops, .blog, .general{
      padding: 150px 0px;
}

.workshops h1, .blog h1, .general h1{
    margin-bottom: 100px;
    color: var(--black)!important;
}



body .general p, body .general li{
    text-align: justify;
}