body 
{
margin: 0;
padding: 0;
font-family: Calibri, Arial, Helvetica, Sans-serif;
font-size:14px;line-height:1.5;
font-weight:400;
color: #434343;
background: #FFF;
background-attachment: fixed;
background-position: center;
}



/* poczatek menu z headerem w media tez*/

header
{
position: absolute;
height: 60px;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}


header .logo
{
color: #fff;
height: 50px;
line-height: 50px;
font-size: 24px;
float: left;
font-weight: bold;
}

header nav
{
float: right;
}


header .logo img
{
height: 60px;
transition: .5s;
}


header.black
{

height: 80px;
padding: 10px 150px;

}


header.black ul li a
{
color:#fff;
line-height:60px;
}



header nav ul
{
margin: 0;
padding: 0;
display: flex;
}


header nav ul li
{
list-style: none;
position: relative;
}




header nav ul li.sub-menu:before
{
content: '\f0d7';
position: absolute;
font-family: fontAwesome;
line-height: 50px;
color: #262626;
right: 5px;
}



header nav ul li.active.sub-menu:before
{
content: '\f0d8';
}


header nav ul li ul
{
position: absolute;
left: 0;
background: rgba(0,0,0,0.5);
display: none;
}


header nav ul li.active ul
{
display: block;

}




header nav ul li ul li
{
display: block;
width: 200px;
}



header nav ul li a
{
text-transform: uppercase;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #262626;
font-size: 14px;
text-decoration: none;
display: block;
transition: .5s;
font-weight: bold;
}


header nav ul li ul li a
{
color: #fff;
font-size: 10px;
font-weight: normal;
}


header nav ul li a:hover,
header nav ul li a.active
{
color: #fff;
background: #ff0000;
}


.menu-toggle
{
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}


.menu-toggle p
{
float: right;
padding: 0 0 0 5px;
}


@media (max-width: 1114px)
{



header
{

background: rgba(0,0,0,0.5);
padding: 0 20px;
} 
header.black
    {
background: rgba(0,0,0,1);
height: 60px;
padding: 0 20px;
          
    }


.menu-toggle
{
display: block;
} 

header .logo img
{
height: 50px;
transition: .5s;
}


header nav
{
position: absolute;
width: 100%;
height: calc(100vh-50px);
background: #333;
top: 50px;
left: -100%;
transition: 0.5s;
} 
header nav.active
{
left: 0;
}


header nav ul 
{
display: block;
text-align: center;
}


header nav ul li a
{
text-transform: uppercase;
color: #fff;
font-size: 17px;
font-weight: bold;
border-bottom: 1px solid rgba(0,0,0,.2);
}






header nav ul li.active ul
{
position: relative;
background: #4d4b4b;
}


header nav ul li ul li
{
width: 100%;
}


}

/* koniec menu*/

section.sec1
{
width: 100%;
height: 70vh;
background: url(fotograflublin_chrzest.jpg);
background-position: center; 
background-size: cover;
}

footer {clear:both;color:#FFF;background:#121212;padding:15px 0 15px 30px;margin:0 0 25px; }



footer p
{
padding: 0px 0px 15px 0px;
text-align:center;
}


/* postrona galerii*/




section
{
padding: 100px 0 100px;

}

.row
{
position: relative;
        
        left: 20%;
        margin-right: auto;
        
}

.box
{


position: relative;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 10px;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;


}



.box:hover
{
transform: translateY(-30px);
box-shadow: 0 50px 50px rgba(0,0,0,.5);
}



.box .imgBox
{
position: relative;

}

.box .imgBox img
{
transition: .5s;
}


.box:hover .imgBox img
{
opacity: .5;


}


.box .content
{
position: absolute;
bottom: -40px;
left: 0;
padding: 20px;
box-sizing: border-box;
transition: .5s;
opacity: 0;
}

.box:hover .content
{
opacity: 1;
bottom: 0px;
}


.box .content h3
{
font-size: 23px;
color: #fff;
font-weight: 700;
}


.box .content p
{
font-size: 16px;
color: #fff;
font-weight: 400;
}


.box .content .btnD
{
border: none;
background: #fe1b70;
color: #fff;
font-size: 16px;
padding: 10px 20px;
font-weight: 700;
transition: .5s;
}


.box .content .btnD:hover
{
border: none;
background: #f6fe1b;
color: #262626;

}


/* media1*/
@media (max-width: 1114px)
{





}


@media (min-width: 1114px)
{



}
@media (min-width: 501px; max-width: 1114px)
{
.row
{
position: relative;
        
        left: 17%;
        margin-right: auto;
        
}



}


/* media1 koniec*/
/* media2*/




@media (max-width: 500px) 
{
	
.row
{
position: relative;
        
        left: 0;
        margin-right: auto;
        
}



}



/* media2 koniec*/

@media (max-width: 280px)
{
    
header .logo img
    {
        float: left;     
        height: 40px;
       
    }

.row
{
position: relative;
        
        left: 0;
        margin-right: auto;
        
}





}


@media (max-width: 243px)
{
    
header .logo img
    {
        float: left;     
        height: 30px;
       
    }
.row
{
position: relative;
        
        left: 0;
        margin-right: auto;
        
}






}




@media (max-width: 212px)
{
    
header .logo img
    {
        float: left;     
        height: 20px;
       
    }
.row
{
position: relative;
        
        left: 0;
        margin-right: auto;
        
}
}

@media (max-width: 180px)
{
    
header .logo img
    {
        float: left;     
        height: 10px;
       
    }

.row
{
position: relative;
        
        left: 0;
        margin-right: auto;
        
}









}