/*

Theme Name: pixelben otthon theme

Theme URI: 

Author: Szilvasi Orsolya

Author URI: https://pixelbenotthon.hu

Description: pixelben otthon theme by Szilvasi Orsolya

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: pixelben_otthon_theme

*/



/* General*/

html{

    font-family:"Poppins", sans-serif;

    font-style: normal;

    font-weight: 400;

    font-size: 18px;

    color:#2A2D2C;

}



body{

    background-image: url(img/pixelben-background.png);

    background-size: 100% auto;

    background-repeat: repeat-y;

}



@media only screen and (max-width: 768px) {

    html {

        font-size: 16px;

        line-height: 1.4;

    }



}





.content-box {

    max-width: 1200px;

    width: 90%;

    margin: 0 auto;

}





.white-box, .white{

    margin-bottom: 60px;

    background-color: #fff;

    padding: 40px;

   

}

.white-box{

    border-radius: 60px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}



/*.white-bg{

    background-color: #fff;

    padding: 20px;

    margin-top: 60px;



}*/



.yellow-border{

    border: 2px solid #F3D003;

    padding: 40px;

    border-radius: 20px;

    margin-bottom: 40px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

 

}









.cta-bottom{

    background-image: url(img/cta-bottom-bg-orange2.jpg);

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

   color: #fff;

 

   margin-bottom: 0;

}



.cta-bottom h3{

    margin-top: 0;

}



.cta-bottom .wp-block-buttons{

flex-direction: row;

}



.cta-bottom .content-box{

    padding: 40px 0;

}





.yellow-border h3{

    margin-top: 0;

}



.price{

    font-family: "Marcellus", serif;

    font-weight: 400;

    font-style: normal;

    font-size: 1.38rem;

}





a{

    text-decoration: none;

    color: #88A112;

    cursor: pointer;

}



a:hover{

    color: #2A2D2C;

}



.wp-block-buttons{

    display: flex;

    flex-direction: row;

    align-items: center;

}



.wp-block-buttons>.wp-block-button{

    margin-left: 30px;

}



.wp-block-buttons>.wp-block-button:first-of-type{

    margin-left: 0px;

}



.wp-block-button__link{

    padding: 0.5em 1em;

    margin-top: 27px;

    border-radius: 10px;

    text-transform: uppercase;

    text-align: center;

    font-size: 1rem;

    display: inline-block;

    border: solid 2px #f69328;

    background-color: #f69328;

    color: #fff;

    height:fit-content;

}



.is-style-outline > .wp-block-button__link{

    padding: 0.5em 1em;

    background-color: #fff;

    color: #f69328;

    border: solid 2px #f69328;

}







.wp-block-button__link:hover{

    /*background-color: #fff;

    

    border: solid 2px #f69328;

    */

    color:#fff;

    -webkit-transform: translateY(-3px);

            transform: translateY(-3px);

    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

   

}





.is-style-outline > .wp-block-button__link:hover{

    /*background-color: #f69328;

    color: #fff;

    border: solid 2px #f69328;*/

    -webkit-transform: translateY(-3px);

            transform: translateY(-3px);

    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

            

    color: #f69328;

}



.row{

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.center{

    text-align: center;

    margin: 0 auto;

}





#go-to-top{

    

}









/* Tipography */



h1, h2, h3{

    font-family: "Marcellus", serif;

    font-weight: 400;

    font-style: normal;

    line-height: 1.4;

}



h1{

    font-size: 2.77rem;

    margin-bottom: 60px;

    margin-top: 60px;

    text-align: center;

}





h2{

    font-size: 2rem;

    margin-bottom: 1.5rem;

    margin-top: 2rem;

  

}



h2.wp-block-heading:first-of-type{

    margin-top: 0;

}



h2+h3{

    margin-top: 1rem;

}



section + section{

    margin-top: 60px;

}

h3{

    font-size: 1.5rem;

    margin-top: 40px;

    margin-bottom: 1rem;



}



h4{

    font-size: 30px;

    margin-bottom: 1.5rem;

    margin-top: 40px;

}



h5{

    font-size: 25px;

}







p{

    line-height: 1.6;

    margin-bottom: 0.5rem;

}



p:last-of-type{

    margin-bottom: 0;

}



.bigger-text{

    font-size:1.2rem;

    line-height: 1.5;

}





/*listák*/



main ul>li, main ol>li{

    position: relative;

    padding-left: 4rem;

}





main ul>li:before{

    content:url("");

    background-image: url(img/square.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center ;

    width: 0.75rem;

    height: 0.75rem;

    position: absolute;

    left: 30px;

    top: 7px;

}

ul>li:has(li), ol>li:has(li){

    font-size: 20px;

}



ul>li>ul>li, ol>li>ul>li{

    font-family:"Poppins", sans-serif;

    font-size: 1rem;

    padding-left:2rem;

    padding-left:0;

}





ul>li>ul>li:before, ol>li>ul>li:before{

    display:none;

}



main ol{

    counter-reset: my-li-counter;

}



main ol>li{

    counter-increment: my-li-counter;

    

}



main ol>li::before{

    content:counter(my-li-counter)".";

    display: inline-block;

    color:#88A112;

    font-family: "Marcellus", serif;

    font-size: 25px;

    position: absolute;

    left: 30px;

    

}



ol, ul{

    margin-bottom: 27px;

}











main .wp-block-image img{

    max-width: 100%;

  max-height: 500px;

  width: auto;

  height: auto;

 

    border-radius: 20px;

}



.pagination .nav-links{

    font-family: "Marcellus", serif;

    font-size: 1.4rem;

    text-align:center;

    margin-top: 40px;

    margin-bottom: 40px;

}



.pagination .nav-links .page-numbers{

    color:#2A2D2C;

    margin: 0 1rem;

    padding: 0.3em 0.5em;

}



.pagination .nav-links a.page-numbers:hover{

    color:#88A112;

}



.pagination .page-numbers.current{

    border:#F3D003 2px solid;

}



/* Layout */

/*title*/

.title{

    background-image: url(img/pixelben-background.png);

    background-size: 100% auto;

    background-repeat: repeat-y;

    padding: 0.5rem 0;

    margin: 1rem auto 1rem auto;

    text-align: center;

    position:relative;

    

}

.title h1{



    margin: 30px auto;

    text-align: center;

}



.full-bleed {

    width: 100vw;              /* teljes viewport szélesség */

    position: relative;

    left: 50%;

    right: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    max-width: 100vw;

    margin-bottom: 60px;

  }



.full-bleed.cta-bottom{

  margin-bottom:0;

}



.white{

    background-color: #fff;

}



  .prologue{

    padding-bottom:40px;

    

  }



main ul>li>ul>li{

    font-size: 18px;

}



#go-to-top{

    position: fixed;

    height: 32px;

    width: 50px;

    bottom: 40px;

    right: 40px;

    background: url(img/go-to-top.png);

    cursor: pointer;

    z-index: 8;

}







/*flipping cards*/



.service-grid > *{

    gap: 40px!important;
    display: grid;

    margin-bottom: 40px;
    grid-template-columns: 1fr 1fr 1fr;

}



.flipcard {

    width: 100%;

    height: 300px;

    perspective: 150rem;



  }

  

  .flipcard-inner {

    width: 100%;

    height: 100%;

    position: relative;

    

  }

  

  .flipcard-side {

    position: absolute;

    top: 0; left: 0;

    width: 100%;

    height: 100%;

    backface-visibility: hidden;

    transition: transform 0.8s ease;

    border-radius: 12px;

    overflow: hidden;

    padding: 20px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

   

    

  }

  

  /* FRONT */

  .flipcard-front {

    background-color: #fff;

    color:#2A2D2C;

    transform: rotateY(0);

   

    

  }

  

  /* BACK */

  .green{

    background: #88A112;

  }



  .yellow{

    background: #F3D003;

  }



  .orange{

    background: #f69328;

  }

  

  .flipcard-back {

    color: #2A2D2C;

    transform: rotateY(180deg);

  }

  

  /* HOVER ANIM */

  .flipcard:hover .flipcard-front {

    transform: rotateY(-180deg);

  }

  

  .flipcard:hover .flipcard-back {

    transform: rotateY(0);

  }

  

  /* Image */

  .flipcard-img {

    max-width: 120px;

    height: auto;

    margin-bottom: 15px;

  }

  

  /* Title */

  .flipcard-title {

    font-size: 1.4rem;

    text-align: center;

    text-transform: uppercase;

    color:#2A2D2C;

  }

  

  /* Button */

  .flipcard-link{

    margin-top: 20px;

    color:#2A2D2C;

    text-align: left;

    background-color: transparent;

    border-color:#2A2D2C;

    display: block;

  }



  .flipcard-link:hover{

    color:#2A2D2C;

  }

 

  .flipcard,

.flipcard-inner,

.flipcard-side {

    overflow: visible !important;

}



/*blog*/

#blog-home .content-box{

    background-color: #fff;

    padding:60px 40px;

}





/*portfolio*/

.portfolio-grid{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap:40px;

    align-items: center;

}





.portfolio-item,

.portfolio-item .hover-text{

    max-width: 390px;

    width:100%;

    height: 100%;

    aspect-ratio:1/1;

}



.portfolio-item{

    position:relative;

   

}



 .portfolio-title,

 .hover-caption{

    opacity: 0;

}



.cat-title{

    display: inline-block;

    position: absolute;

    top: 0;

    right: 0;

    background-color: #88A112;

    color: #fff;

   border-bottom-right-radius: 10em;

    padding: 0.5em 1.5em 0.5em 0.75em;

}



.cat-title a{

    color: #fff;

}



.portfolio-item .hover-text{

    content: "";

    position: absolute;

   

    top: 0;

    z-index: 5;

    padding: 30% 0.5em;

    font-size: 2rem;

    text-align: center;

    color: #fff;

    display:flex;

    flex-direction: column;

  justify-content:center;

}



.portfolio-item:hover .hover-text{

    

    background-color:#88A112CC;

    opacity: 1;

   

}



.portfolio-item:hover .portfolio-title{

    font-size: 1.8rem;

    opacity: 1;

   

}



.portfolio-item:hover .hover-caption{

    font-size: 1.22rem;

    opacity:1;

}



/*

.portfolio-item:hover .portfolio-title,

.portfolio-item:hover .hover-caption{

    position: absolute;

    opacity: 1;

    font-size: 2rem;

    text-align: center;

    color: #fff;

    z-index: 7;

   top: 0;

   padding: 40% 0.5em;

   

    width: 390px;

    height: 390px;

}



*/





.portfolio-thumbnail img{

   

    z-index:3;

    object-fit: cover;

    max-width: 390px;

    width: 100%;

    height:auto;

    aspect-ratio: 1/1;

}





p.contact-mail, p.contact-phone{

    margin-bottom: 1rem;

    margin-top: 1rem;

}





.contact-mail a, .contact-phone a{

    position: relative;

    margin-left: 3rem;

   

}



.contact-mail a:before,

.contact-phone a:before{

position: absolute;

content:"";



background-position: center center;

background-repeat: no-repeat;

object-fit: contain;

width:29px;

height:28px;

margin-right:10px;

left: -3rem;

}



.contact-mail a:before{

    background-image: url(img/paper-plane-regular-green.svg);

}



.contact-phone a:before{

    background-image: url(img/phone-solid-green.svg);

}

/*Kapcsolati űrlap*/





.wpcf7-acceptance{

    border: none;

}



input[type="text"],

input[type="email"],

textarea, .wpcf7-select {

    width: 100%;

    line-height: 1.5;

    padding: 0.5em 1em;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    background-color: #F4F4F4;

    color: #2A2D2C;

    border: none;

}



input[type="checkbox"] {

    border:#88A112 solid 1px;

    width: 30px;

    height: 30px;

    -webkit-appearance: auto;

    display: inline-block;

}

#cmplz-document{
    font-size: 1rem;
    max-width: 100%;
}





/* Töréspontok */

@media only screen and (max-width: 1300px){

   

}



@media only screen and (max-width: 1040px) {

   .service-grid > *{

        grid-template-columns: 1fr 1fr;

   }



   .portfolio-grid{

        grid-template-columns: 1fr 1fr;

        grid-gap:20px;

    }

}







@media only screen and (max-width: 768px) {

   

    .bigger-text{

        font-size: 20px;

    }

    

    

    section + section{

        margin-top: 40px;

    }

    .white-box, .white{

        padding: 40px 20px;

        

    }



    .white-box{

        border-radius: 40px;

    }

    .yellow-border{

       

        padding: 20px;

        

        margin-bottom: 30px;

    }

  



    .wp-block-button:first-of-type{

        margin-top: 0px;

        margin-left: 0;

    }



    .cta-bottom .wp-block-buttons{

        flex-direction: column;

        align-items:flex-start;

    }



    .cta-bottom .wp-block-buttons>.wp-block-button{

        margin-left: 0px;

    }



    .cta-bottom .wp-block-button:first-of-type{

        

        margin-left: 0;

    }



    main ul>li:before{

       

        width: 0.75rem;

        height: 0.75rem;

     

    }



    .flipcard-img{

        max-width: 100px;

    }



}



@media only screen and (max-width: 552px) {

    h1{

        font-size:2.25rem;

    }



    h2{

        font-size: 1.8rem;

    }



    h3{

        font-size:1.4rem;

    }

    .wp-block-buttons{

        flex-direction: column;

    }



    .wp-block-buttons>.wp-block-button{

        margin-left: 0;

    }



    .title h1{

        margin: 20px auto;

    }



    .service-grid >*{

        grid-template-columns: 1fr;

       }

    

    .portfolio-grid{

        
        grid-template-columns:  1fr;

        grid-gap:20px;

    

    }



    main ul>li,

    main ol>li{

        padding-left: 1.5rem;

    }

    main ul>li:before,

    main ol>li:before{

        left:0;

      

    }



    main ol>li:before{

        top: -3px;

      

    }



    .pagination .nav-links{

       

        font-size: 1.2rem;

       

    }

    p.contact-mail a,

    p.contact-phone a{

        margin-left:1.4rem;

    }



    .contact-mail a:before,

    .contact-phone a:before{

       

        left:-1.4rem;

        width: 1.2rem;

        height: 1.2rem;

    }

    

}