/*
Theme Name: Fashion Woman	
Theme URL: 
Description: 
Version: 1.0
Author: Marcin Zaremba. 

*/
html>body #content {
	height: auto;
}

body{
	padding: 0px;
	margin: 0px;
	font: 62.5% 'Lato', sans-serif; /* Resets 1em to 10px */
	overflow-y: scroll;	
	background: url(images/fashionwoman-bg.png) repeat-y top center;
}

:root {
	--inside: 1300px;
	--primary-color: #333;
	--secondary-color: #d6c0b5;
}

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

#head{}
#head h5 {display: none;}

.head-top {
	text-align: center;
}

.head-top img.logo {
	margin: 30px 0 0 0 !important;
}

#head {
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: var(--secondary-color);
	margin: 50px 0 30px 0;
	background: #fff;
}

#head.scroll  {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 666;
	top: -50px;
	background: var(--primary-color);
	border-top: 0;
	transition: 200ms ease;
}

#head.scroll .menu a {
	color: #fff;
}

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

#head .menu {
		display: block;
		text-align: center;
}


#head ul {
		margin: 0;
        padding: 0;
}
        
#head .menu li {
		list-style: none;
		display: inline-block;
		padding: 15px 20px;
	}

#head .menu li a{
		font-size: 1.6em;
		font-weight: 500;
		color: var(--primary-color);
		transition: 200ms ease;
	}

#head .menu li a:hover, #head .menu li.current-menu-item a    {
		color: var(--secondary-color);
		transition: 200ms ease;
	}

#head .menu li.menu-item-has-children {
		position: relative;
}             

#head ul.sub-menu {
		display: flex;
		width:250px;
		flex-direction: column;
		padding: 30px 0 0 0;
		position: absolute;
		left: -70px;
		transform-origin: top;
		transition: 500ms ease;
		z-index: 666;
		transform: scale(1,0);
		opacity: 0;
}

#head ul.sub-menu li {
		padding: 10px 10px;
		text-align: center;
		background: var(--sec-color);
		margin: 4px 0;
}

#head.scroll ul.sub-menu li {
                background: var(--sec-color);
}

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

#head ul.sub-menu li a:hover {	
		color: var(--secondary-color);
		font-weight: 500;
}

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

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

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

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


.text-content p a:hover {
	opacity: .6;
	transition: 200ms;
}


a img,:link img,:visited img { border:none }    
a, a:link {text-decoration: none;}
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: 2.0em;
        line-height: 1.1em;
		font-weight: 500;
        margin: 0px;
		padding: 0;
}

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

/************************************************
*	LAYOUT										*
************************************************/

.inside {
        width: var(--inside);
		margin: 0 auto;
		animation: fadein 1000ms ease;
}

.page {
	animation: fadein 1000ms ease;
}

.post-columns {
	display: grid; 
	grid-template-columns: 1fr 4fr;
	margin-top: 40px;
	padding: 0 10px
}

div.post-title {
	margin-right: 40px;
}

div.post-title h1 {
	font-size: 1.4em;
	text-transform: uppercase;
}

.lista {
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr 1fr; 
}
 

.lista-element {
	margin-bottom: 30px;
	width: 90%;
	margin: 0 auto 40px auto;
}

.lista-element h1 {
	margin: 10px 0 5px 0;
    text-transform: uppercase;
    font-size: 1.2em
}

.lista-element h1 a {
	color: var(--primary-color); 
}

.lista-element .img-wrapper {
	width: 100%;
	overflow: hidden;
}

.lista-element img {
	width: 100%;
	height: auto;
	transition: 300ms ease;
}

.lista-element:hover > div a img {
	transform: scale(1.03);
	transition: 300ms ease;
}

.lista-element div {
	transition: 300ms ease;
}

.lista-element:hover > div {
	box-shadow: 0 0 20px #aaa;
	transition: 300ms ease;
}

a.kategoria {
	
	font-size: .9em;
}

.kategorie-menu {
	list-style: none;
	display: flex;
	width: 100%;
	justify-content: center;
	border-bottom: 1px solid var(--secondary-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.kategorie-menu li {
	margin: 0 10px;
	transition: 200ms;
}

.kategorie-menu li:hover {
	opacity: .4;
	transition: 200ms;
}

.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 {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	}

.marki-glowna img:hover {
	box-shadow: 0 0 20px #aaa;
	transition: 200ms ease;
}

.marki-glowna img {
	transition: 200ms ease;
}

.marka {
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
}

.nazwamarki {
	font-size: .8em;
}

li.cat-item {
	color: var(--secondary-color);
	font-size: .7em;
}

li.cat-item a{
	font-size: 1.3em !important;
}



p.cena {
	margin: 0;
	padding: 0;
	font-weight: 700;
	font-size: 1.2em;
	opacity: .6;
}


/************************************************
*	PLUGINS									*
************************************************/

a.fl-button {
	background: none !important;
	border: none !important;
	border-left: 1px solid var(--primary-color) !important;
	border-bottom: 1px solid var(--primary-color) !important;
	border-radius: 0 !important;
	transition: 200ms ease;
}

a.fl-button span {
	transition: 200ms ease;
}

a.fl-button:hover {
	background: var(--primary-color) !important;
	transition: 200ms ease;
}

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

a.back {
	padding: 10px 20px;
	color: var(--primary-color);
	float: right;
}

a.back:hover {
	padding: 10px 20px;
	color: #fff;
}

/************************************************
*	FOOTER									*
************************************************/
#foot {
	border-top: 1px solid var(--secondary-color);
	margin: 40px 0 0 0;
	padding: 30px 0;
	min-height: 80px;
	}
	
#foot .kontakty {
	float: left;
	margin-left: 10px;
}	

#foot .fpc {
	text-align: center;
	opacity: .5;
	margin: 30px auto;
	font-size: 1.2em;
}

#foot .fpc a{
	color: var(--primary-color);
}

#foot h5 {
	display: none;
}

#foot .logo {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.instagram {
	background: url(images/instagram.svg) no-repeat;
	width: 40px;
	height: 40px;
	display: block; 
	float: right; 
	background-size: 100% auto;
	margin: 10px 0 0 0;
}

.facebook {
	background: url(images/facebook.svg) no-repeat;
	width: 40px;
	height: 40px;
	display: block; 
	float: right; 
	background-size: 100% auto;
	margin: 10px 10px 0 0;
	transition: 200ms;
}
.facebook:hover {
	opacity: .6;
	transition: 200ms;
}
iframe {
	border: 1px solid var(--secondary-color) !important;
}
/************************************************
*	PLUGINS										*
************************************************/				
.mobmenur-container i {
	background: rgba(255,255,255,.7);
}

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


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

@media(max-width:900px) {
	.lista {
		grid-template-columns: 1fr 1fr 1fr; 
	}
	.post-columns {
		flex-direction: column;
	}
}
@media(max-width:768px) {
		#foot img.logo {
		display: none;
	}
}
@media(max-width:600px) {
	.lista {
		grid-template-columns: 1fr 1fr; 
	}
	.top-space.scroll {
		padding: 36px;
	}
	.kategorie-menu {display: none;}
	
}
@media(max-width:450px) {
	.lista {
		grid-template-columns: 1fr; 
	}
	.head-top img.logo {
		transform: scale(.8);
		transform-origin: center center;
		} 	

}