/*
Theme Name: NEW LEVEL
Theme URL: 
Description: 
Version: 1.0
Author: eFabryka.net

*/

@import "css/fonts.css";

html>body #content {
	height: auto;
}

body{
	padding: 0px;
	margin: 0px;
	font: 62.5% 'Raleway', sans-serif; /* Resets 1em to 10px */
	overflow-y: scroll;		
}

:root {
	--first-color: #2F2E2C;
	--second-color: #A95997;
	--third-color: #89B326;
	--foot-color: #2F2E2C;
}

/************************************************
*	HEAD										*
************************************************/

#head{
	font-size: 1.6em;
}

.header-top {
	height: 107px;
	background: url(images/header-top-bg.png) no-repeat;
	background-position: top center;
}

.head-menu.scroll {
	position: fixed;
	z-index: 777;
	top: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
	box-shadow: 0 0 10px #ccc;
	transition: 200ms;
	background: #fff;
}

.top-space.scroll {
	padding-top: 79px;
}

.head-menu.scroll .menu a {

}

.header-top .inside {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
}

#head .telefon {
	background: url(images/telefon.svg) no-repeat;
	background-position: left center;
	background-size: auto 100%;
	padding-left: 2em;
	animation: fadein 1000ms ease;
}

#head .email {
	background: url(images/email.svg) no-repeat;
	background-position: left center;
	background-size: auto 100%;
	padding-left: 2em;
	padding-right: 60px;
	margin-right: 30px;
	margin-left: 90px;
	border-right: 1px solid var(--first-color);
	animation: fadein 1000ms ease;
}

#head .facebook {
	background: url(images/facebook.svg) no-repeat;
	display: block;
	width: 40px;
	height: 40px;
	background-size: cover;
	margin-left: 90px;
	animation: fadein 1000ms ease;
}

#head .instagram {
	background: url(images/instagram.svg) no-repeat;
	display: block;
	width: 40px;
	height: 40px;
	background-size: cover;
	margin-left: 10px;
	margin-right: 10px;
	animation: fadein 1000ms ease;
}

.cart-customlocation {
	margin-left: 10px;
	background: var(--second-color); 
	color: #fff !important;
	padding: 5px 10px;
	border-radius: 30px;
	font-size: .9em;
}

#head .koszyk {
	background: url(images/koszyk.svg) no-repeat;
	width: 25px;
	height: 25px;
	display: block;
	background-size: cover;
	animation: fadein 1000ms ease;
}

#head a {
	transition: 200ms
}

#head a.telefon:hover, #head a.email:hover {
	color: var(--second-color);
	transition: 200ms
}

#head a.facebook:hover, #head a.instagram:hover, #head a.koszyk:hover {
	opacity: .6;
	transition: 200ms
}


#head h5 {display: none;}

#head .menu {
		display: block;
		text-align: right;
		float: right;
		clear: right;
		animation: fadein 1000ms ease;
		}
#head .menu ul {
		margin: 0;
		padding: 0;
		}

#head .menu li {
		list-style: none; 
		display: inline-block;
		margin: 30px 0;
		}

#head .menu li a{
		padding: 10px 10px;
		margin: 0;
		transition: 200ms ease;
		font-size: 1.1rem;
		font-weight: 500;
		cursor: pointer;
		}
		
#head .menu li a:hover, #head .menu li.current-menu-item a	 {
		color: var(--second-color);
		transition: 200ms;
		}
		
#head .menu li.menu-item-has-children {
	position: relative;
}	

#head .menu li.oferta ul.sub-menu {
	width: 200px;
	left: -40px;
}
	
#head .menu li.menu-item-has-children a:after{ 
	content: url(images/submenu-arrow.svg);
	margin-left: 10px;
	display: inline-block;
	transition: 200ms;
}
	
	
#head .menu li.menu-item-has-children:hover > a:after{ 
		transform: rotate(90deg);
		transition: 500ms;
}
	
	
#head ul.sub-menu li a:after{ 
	display: none !important;
}
	

#head ul.sub-menu {
		display: flex;
		left: -40px;
		box-shadow: 0 0 10px #eee;
		flex-direction: column;
		position: absolute;
		width: 250px;
		transform-origin: top;
		transition: 500ms ease;
		z-index: 666;
		transform: scale(1,0);
		opacity: 0;
		margin-top: 10px;
		background: #fff;
}

#head ul.sub-menu li {
	padding: 10px 10px;
	text-align: center;
	margin: 4px 0;
}


#head ul.sub-menu li a{
	padding: 10px 10px;
	text-align: center;
	margin: 4px 0;
}

#head.scroll ul.sub-menu li {
	
}

#head ul.sub-menu li a {
	padding: 10px 10px;
	text-align: center;
}

#head ul.sub-menu li a:hover {
}

#head li.menu-item-has-children:hover > ul.sub-menu {
	transform: scale(1,1);
	opacity: 1;
	transition: 500ms ease;
}

.head-gray {
	background: #F7F7F7;
	display: block;
	width: 100%;
	height: 67px;
	margin-bottom: 40px;
}

#head img.logo {
	position: absolute;
	top: 10px;
	animation: logoanim 1000ms ease;
}


@keyframes logoanim {
	0%{top: -200px}
	100%{top: 10px}
}



/************************************************
*	TEXT										*
************************************************/

.text-content {
        padding: 0;
        color: var(--first-color);  
        font-size: 1.6em;
        line-height: 1.6em;	
		text-align: left;
}

.text-content a {transition: 200ms;}
.text-content a:hover {color: var(--second-color);transition: 200ms;}


a img,:link img,:visited img { border:none }    
a, a:link {text-decoration: none; color: var(--page-color);}
a:hover {text-decoration: none;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
ul {margin: 0;}

::selection {color: #fff;background: #333;}

h1 {
        font-size: 1.8em;
        line-height: 1.1em;
		font-weight: 500;
        margin: 0px;
		padding: 0;
}

h2 {
        font-size: 1.6em;
        line-height: 1.1em;
		font-weight: 500;
        margin: 20px 0 40px 0;
		padding: 0;
		font-weight: 700;
}

h3 {
        color: var(--second-color);
		font-style: italic;
		font-weight: 300;
		line-height: 1.2em;
		font-size: 1.9em;
}

/************************************************
*	LAYOUT										*
************************************************/
.blog-lista {
	display: flex;
	flex-direction: column;
}

.blog-lista .blog-post p {
	padding: 0 10px;
}

.blog-lista img.wp-post-image {
	float: left;
	margin-right: 15%;
}

.blog-lista .lista-post {
	margin-bottom: 40px;
}

.blog-lista .date, .single-post .date {
	padding-left: 35px;
	background: url(images/data.svg) no-repeat;
	background-position: left center;
	background-size: auto 80%;
	font-size: 1.3rem;
	display: inline-block;
	margin-bottom: 10px;
}

.blog-lista h1, .single-post h1 {
	text-transform: uppercase;
	font-size: 1.2rem;
	color: var(--second-color);
	font-weight: 700;
	margin: 10px 0 20px 0;
}

.blog-lista .fl-button {
	margin-top: 40px !important;
	display: inline-block !important;
	}
	
.blog-lista {
	margin-bottom: 20px;
}

.single-post .fl-button {
	display: inline-block !important;
	float: right !important;
	margin: 0 10px 40px 0 !important;
}

.single-post {
	margin-top: 40px;
}

.single-post h1, .single-post .date {
	margin-left: 20px;
}

.inside {
        width: 1370px;
		margin: 0 auto;
}

.page {}
.list{}
.single{}

.alignleft {float: left;margin-right: 20px;}
.alignright {float: right;margin-left: 20px;}
.aligncenter {display: block;text-align: center;margin: 0 auto !important;}

.item p a{text-decoration: none;}
.clear {clear: both;}

.onas-glowna {
	color: #fff;
}

.onas-glowna .fl-button {
	background: #fff !important;
	color: var(--second-color) !important;
	font-weight: 700 !important;
	border: 1px solid #fff !important;
	border-radius: 0 !important;
	padding: 10px 50px !important;
	transition: 200ms;
}

.onas-glowna .fl-button span {
	color: var(--second-color) !important;
	transition: 200ms;
}

.onas-glowna .fl-button:hover {
	background: none !important;
	transition: 200ms;
}

.onas-glowna .fl-button:hover > span {
	color: #fff !important;
	transition: 200ms;
}

.onas-glowna h3 {
	color: #fff;
}

.szaretlo {
	background: #F7F7F7;
}

.szaretlo h3 {
	font-size: 1.4em;
	font-weight: 700;
}


.fl-button {
	background: none !important;
	border: 1px solid var(--third-color) !important;
	color: var(--third-color) !important;
	padding: 15px 60px !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
	transition: 200ms;
}

.fl-button span {
	color: var(--third-color) !important;
	transition: 200ms;
}

.fl-button:hover {
	background: var(--third-color) !important;
	color: #fff !important;
	transition: 200ms;
}

.fl-button:hover span {
	color: #fff !important;
	transition: 200ms;
}





/************************************************
*	SIDEBAR									*
************************************************/

/************************************************
*	FOOTER									*
************************************************/
#foot {
	background: #2F2E2C;
	padding: 30px 0;
	color: #8E8C87;
	font-size: 1rem;
	line-height: 1.3rem;
}

.foot-flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#foot h5 {display: none;}

#foot a.efabryka {
	padding-right: 90px;
	background: url(images/efabryka.svg) no-repeat;
	background-position: right center;
	background-size: auto 80%;
	margin: 30px 0 0 10px;
	display: inline-block;
	font-size: .8em;
}

#foot .mapa {
	background: url(images/mapa-footer.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 30px;
}

#foot .telefon {
	background: url(images/telefon-footer.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 30px;
}

#foot .email {
	background: url(images/email-footer.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 30px;
}

.strona-kontakt .mapa {
	background: url(images/mapa-kontakt.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 40px;
}

.strona-kontakt .telefon {
	background: url(images/telefon-kontakt.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 40px;
}

.strona-kontakt  .email {
	background: url(images/email-kontakt.svg) no-repeat;
	background-size: auto 100%;
	background-position: left center;
	padding-left: 40px;
}

.strona-kontakt  .left {
	padding-left: 40px;
}

#foot ul {
	list-style: none;
}

#foot ul li {
	margin: 10px 0;
}

#foot a:hover {
	opacity: .6;
	transition: 200ms;
}

#foot a {
	transition: 200ms;
}

.linia-foot {
	background: #8E8C87;
	width: 1px;
	height: 100%;
	display: block;
}

/************************************************
*	PLUGINS										*
************************************************/				
.entry-summary {
	animation: fadein 1000ms;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 5px 0;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 10px 40px;
	border: 1px solid var(--second-color);
	color: var(--second-color);
	transition: 200ms;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--second-color);
	color: #fff;
	transition: 200ms;
}

.woocommerce-info {
	border-top-color: var(--third-color) !important;
}
.woocommerce-info::before {
	color: var(--third-color) !important;
}

.woocommerce div.product form.cart {
	margin-bottom: 5em !important;
}
#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
	width: 150px !important;
}
.entry-summary input {
	font-size: 1em !important;
	padding: 8px 0 !important;
	border-radius: 0 !important;
	border: 1px solid #000 !important;
}

.entry-summary input:focus-visible {
	border-radius: 0 !important;
}

.entry-summary .woocommerce-Price-amount {
	color: var(--first-color) !important;
	font-weight: 700;
	font-size: 1.4em;
}

h1.product_title {
	color: var(--second-color);
}

.woocommerce .products .product {
	padding-bottom: 20px !important;
	transition: 200ms;
	text-align: center;
}
.woocommerce .products .product h2 {
	color: var(--second-color);
}

.product-quantity input{
	padding: 10px !important;
	border-radius: 0 !important;
	border: 1px solid var(--first-color) !important;
}

.woocommerce-cart-form__cart-item .cart_item input {
	padding: 10px !important;
}

.woocommerce-message {
	border-top-color: var(--third-color) !important;
}

.woocommerce-message::before {
	color: var(--third-color) !important;
}

.woocommerce .products .product span.but, .inside button, .inside .button {
	background: none !important;
	border-radius: 0 !important;
	border: 1px solid var(--third-color) !important;
	color: var(--third-color) !important;
	font-weight: 700 !important;
	font-size: .8em;
	padding: 10px 40px !important;
	transition: 200ms;
	text-transform: uppercase;
}

.single_add_to_cart_button {
	font-size: .9em !important;
}

.woocommerce .products .product span.but:hover, .inside button:hover, .inside .button:hover {
	background: var(--third-color) !important;
	color: #fff !important;
	transition: 200ms;
}
#customer_details input, #customer_details textarea, #customer_details select {
	padding: 10px !important;
}


.checkout-button {
	font-size: .9em !important;
}

.woocommerce .products .product:hover {
	box-shadow: 0 0 1px 1px var(--third-color);
	transition: 200ms;
}


.woocommerce .products .product .woocommerce-Price-amount {
	color: var(--first-color) !important;
	font-size: 1.4em !important;
	font-weight: 700 !important;
	margin: 0 0 20px 0!important;
	display: block !important;
}


/************************************************
*	ANIMATION									*
************************************************/	
@keyframes fadein {
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes loganim {
	0%{top: -400px;}
	0%{top: 10px;}
	
}


/************************************************
*	RESPONSIVE									*
************************************************/	
@media(max-width:1370px) {
	.inside {width: 100%;}
}

@media(max-width:1100px) {
	#head .menu li a {margin: 0;}
	#head .email {margin-right: 0; margin-left: 20px;}
	#head .facebook {margin-left: 20px;}
}

@media(max-width:1000px) {
	.blog-lista img.wp-post-image {margin-right: 20px}
	}

@media(max-width:920px) {
	#head {display: none;}
	.head-gray {display: none;}
	.top-space.scroll {padding: 0;}
}

@media(max-width:768px) {
	.foot-flex {
		flex-direction: column;
		align-items: center;
	}
	.foot-bottom {
		text-align: center;
	}
	.blog-lista img.wp-post-image {float: none; display: block; margin: 0 auto 30px auto; max-width: 100%; height: auto;}
	.blog-lista .lista-post {width: 94%; padding: 0 3%;}
}

@media(max-width:500px) {
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
		width: 98% !important;
	}
}