body{
	margin: 0;
	font-family: 'Dosis', sans-serif;
	margin: auto;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.site{
	display: table;
	position: relative;
}

.nav{
	width: 25%;
	display: table-cell;
	vertical-align: top;
	background: #1c2874 url(../img/menu-sznur.png) repeat-y top;
    background-size: 10%;
    background-position-x: 15%;
}

.logo{
	display: block;
    width: 90%;
    margin: auto;
    /*background: url(../img/logo-senneo-biale.png) no-repeat top;*/
	background-size: 100% 100%;
    position: relative;
	z-index: 100;
}

.logo img{
	width: 100%;
}

.menu{
	list-style-type: none;
	text-transform: uppercase;
	line-height: 2;
	padding-inline-start: 30%;
	padding-top: 10%;
}

.menu h2{
	display: none;
}

.menu .m-top a{
	color: #b28bf8;
	position: relative;
    display: block;
	z-index: 100;
}

.menu .m-mid a{
	color: #a9a9f0;
	position: relative;
    display: block;
	z-index: 100;
}

.menu .m-bot a{
	color: #6e71e5;
	position: relative;
    display: block;
	z-index: 100;
}

.menu-mobile{
	display:none;
}

.main{
	width: 75%;
	display: table-cell;
	vertical-align: top;
	background: #b8b8fe url(../img/main-sznur.png) repeat-y top;
    background-size: 17%;
    background-position-x: 95%;
}

.page{
	width: 70%;
	/*height: calc(100% - 100px);*/
    margin-left: 7%;
	padding-top: 100px;
	padding-bottom: 331px;
	background-color: #ece0f5;
	min-height: 100%;
}

.page p, h1{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	text-align: justify;
	color: #2b3080;
}

.page p{
	font-size: 1.2em;
	z-index: 100;
    position: relative;
}

.page .litery{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	color: #2b3080;
	font-size: 1.2em;
}

.page .litery a{
	color: #2b3080;
	position: relative;
    z-index: 999;
	padding: 2px;
	font-size: 1.3em;
}

.page .litery a:hover{
    font-weight: 600;
}

.article{
	background: #b8b8fe url(../img/article-background.png) repeat-y top;
    background-size: 100%;
    background-position-x: 100%;
}

.page.article p, h2{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	text-align: justify;
	color: #2b3080;
	font-weight: 100;
}

.page.article h2{
	font-weight: 100;
	font-size: 2em;
}

.page p img{
	max-width: 100%;
	display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.page p img.right{
	float: right;
	padding: 10px;
}

.page p img.left{
	float: left;
	padding: 10px;
}

.page p a{
	padding: 10px;
}

.page .reklama-post{
    padding-top: 10px;
    padding-bottom: 10px;
	display: table;
	margin: 0 auto;
}

.page .reklama-post img{
	max-width: 100%;
}

.reklama-bok{
	position: absolute;
    right: 0;
    max-width: 15%;
    padding-right: 1%;
    padding-top: 331px;
}

.letter-list h2{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	text-align: center;
	color: #2b3080;
}

.one-word{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	color: #2b3080;
	height: 100%;
	z-index: 999;
    position: relative;
	display: flex;
}

.one-word:nth-child(2n){
	background-color: #e0cdef;
}

.one-word:hover{
	background-color: white;
}

.one-word .word-left{
	width: 25%;
	height: 100%;
    float: left;
	font-weight: 600;
}

.one-word .word-desc{
	width: 75%;
	height: 100%;
    float: left;
}

.m-word h2{
	text-align: center;
	font-weight: 600;
}

.m-word .top{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
}

.m-word .top h1{
	display: contents;
	float: left;
    max-width: 50%;
}

.m-word .top img{
    max-width: 50%;
	margin-left: 10px;
}

.horoskop-list{
	padding-left: calc(7% - 10px);
    padding-right: calc(7% - 10px);
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	color: #2b3080;
	height: 100%;
	z-index: 999;
    position: relative;
}

.horoskop-list .top{
	width: 100%;
	background: url(../img/rozdzielacz.png) no-repeat top;
	padding-top: 15px;
}

.horoskop-list .top .name{
	display: inline-block;
}

.horoskop-list .top .name h2{
	font-size: 2em;
}

.horoskop-list .top .name span{
	background-color: #2b3080;
    color: white;
    padding: 4px;
}

.horoskop-list .top .czytaj{
	float: right;
    position: relative;
    text-align: center;
    color: white;
}

.horoskop-list .top .czytaj-text{
	position: absolute;
    top: 65%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-size: 100%;
    font-weight: 700;
}

.horoskop-list .top p{
	padding: 0;
}

.breadcrumbs{
	width: calc(100%+10px);
	height: 61px;
	background: url(../img/breadcrumbs.png) no-repeat top;
    background-size: 100% 65%;
    margin-left: -10px;
	padding-top: 3px;
    padding-left: 7%;
}

.breadcrumbs a{
	color: #2b3080;
	font-weight: 600;
	z-index: 100;
}

.breadcrumbs-main{
	display: flex;
    float: left;
}

.breadcrumbs-main:after{
	content:url(../img/arrow.png);
	position:relative;
	z-index:100000;
	left: 5px;
	transform: scale(.7);
    top: -2px;
}

.breadcrumbs-next{
	padding-left: 10px;
	display: flex;
}

.search{
	width: calc(100%+10px);
	height: 90px;
	background: url(../img/search.png) no-repeat top;
    background-size: 100% 80%;
    margin-left: -10px;
	padding-top: 3px;
    padding-left: 7%;
}

.search span{
	color: #fff;
	display: block;
    margin-top: 3px;
	margin-bottom: 4px;
}

.search input{
	position: relative;
	display: inline-block;
    border: 0;
    padding: 3px;
    top: -7px;
}

.search input::placeholder{
	color: #b8b8fe;
	font-family: 'Dosis', sans-serif;
}

.search-button {
	position: relative;
	display: inline-block;
}

.search-button img {
	height: 23px;
	width: auto;
}

.search-button .btn {
	position: absolute;
    top: 46%;
    left: 57%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    font-size: 15px;
    border: none;
    cursor: pointer;
	font-family: 'Dosis', sans-serif;
}

.lang{
	position: absolute;
    right: 15px;
    top: 15px;
}

.lang a{
	padding: 5px;
}

.lang img{
	height: 30px;
}

.chmury-top{
	background: url(../img/chmury-gora.png) no-repeat top;
    background-size: 100%;
    width: 100%;
    height: 331px;
    position: absolute;
    left: 0;
    z-index: 0;
}

.chmury-bottom{
	background: url(../img/chmury-dol.png) no-repeat bottom;
    background-size: 100%;
    width: 100%;
    /*height: 370px;*/
	height:100%;
    position: absolute;
    left: 0;
    z-index: 0;
	/*transform: translateY(-100%);*/
}

.piora-top{
	background: url(../img/piora-glowna.png) no-repeat top;
    background-size: 100%;
    width: 27%;
    height: 570px;
    position: absolute;
    left: 58%;
    z-index: 1;
}

.cookies{
	position: fixed;
    z-index: 999999;
    bottom: 0;
    background: white;
    padding: 3px;
    max-width: 100%;
    margin-bottom: 20px;
    right: 0;
}

.cookies button{
	margin: 5px;
}

.pagination{
	text-align: center;
	margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.pagination a{
	padding: 10px;
    border: 1px #dddddd solid;
    background-color: whitesmoke;
	color: #2b3080;
	margin-left: 5px;
	margin-bottom: 5px;
	display: inline-block;
}

.pagination a.active{
    background-color: #2b3080;
	color: white;
}

.footer{
	padding-bottom: 5px;
}

.menu-right{
	background-color: #ece0f5;
	text-align: center;
}

.menu-right h2{
	background-color: #e0cdef;
	padding: 10px;
    text-align: center;
    margin: 0;
}

.menu-right ul{
	padding: 0;
	margin-top: 0;
}

.menu-right li{
	list-style-type: none;
    padding: 5px;
    margin: 0;
}

.page{
	float: left;
}

.reklama-bok{
	position: relative;
	max-width: 21%;
	padding-left: 1%;
	padding-right: 1%;
	float: left;
	width: 100%;
}

.reklama-bok .reklama-img img{
	display: block;
    margin: 0 auto;
}

.horoskop-list .top .name span.horoskop{
background-color: unset;
color: #8b8b8b;
padding: 0;
font-size: 1em;
}

.horoskop-list .top .name h2{
text-align: initial;
}

@media only screen and (min-width:768px) {
	.menu li.active a:before{
		content:url(../img/gwiazda-menu.png);
		position: absolute;
		z-index: 100;
		left: -25%;
		transform: scale(.7);
	}
	
	.menu li.active a{
		color:white;
	}
	
	.footer{
		text-align: center;
		transform: translateY(-100%);
		color: white;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 500px;
	}
}

@media only screen and (max-width:767px) {
	.site{
		display: block;
	}
	
	.nav{
		width: 100%;
		display: block;
		background: #1c2874;
	}
	
	.logo{
		width: 40%;
	}
	
	.lang img{
		height: 25px;
	}
	
	.menu{
		display: none;
		margin-bottom: 0;
		padding-bottom: 10px;
		padding-top: 10px;
		padding-inline-start: 0;
		text-align: center;
	}
	
	.menu-mobile{
		display: block;
	}
	
	.main{
		width: 100%;
		display: block;
		background: #b8b8fe;
	}
	
	.page{
		width: 94%;
		margin-left: 3%;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.page p img{
		margin: auto;
	}
		
	.chmury-top{
		display: none;
		width: 5px;
		background: unset;
	}
	
	.piora-top{
		display: none;
		background: unset;
	}
	
	.chmury-bottom{
		display: none;
		background: unset;
	}
	
	.breadcrumbs{
		margin-left: -1.5%;
	}
	
	.search{
		margin-left: -1.5%;
	}

	.menu-mobile{
		position: absolute;
		top: 0;
	}
	
	.menu h2{
		display: block;
		color: #fff;
		text-align: center;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-top: 0;
	}
	
	.menu-mobile img{
		height: 30px;
		vertical-align: baseline;
		padding: 23px;
	}
	
	.one-word{
		height: unset;
	}
	
	.horoskop-list .top .name{
		max-width: 75%;
	}
	
	.horoskop-list .top .czytaj{
		max-width: 25%;
	}
	
	.horoskop-list .top .czytaj img{
		max-width: 100%;
	}
	
	.horoskop-list .top .czytaj-text{
		font-size: 65%;
	}
	
	.page .litery a{
		padding: 10px;
	}
	
	.footer{
		text-align: center;
		color: white;
		background-color: #b8b8fe;
	}
	
	.reklama-bok{
		/*display:none;*/
		width: 94%;
		margin-left: 3%;
		max-width: unset;
		padding-top: 10px;
		padding-left: 0;
		padding-right: 0;
	}
	
	.reklama-bok .reklama-img{
		display: none;
	}
	
	.abc{
		display: block;
	}
	
	.menu-right{
		/*display: none;*/
	}
}
.btn-back{
z-index: 100;
position: relative;
border: 1px solid rgba(43, 48, 128, 0.2);
padding: 6px;
color: #2b3080;
margin-left: calc(7% - 10px);
}
.btn-back:hover{
background: linear-gradient(to bottom, #e4d8e8, #d1aedf);
border: 1px solid #b995c8;
}
@media only screen and (max-width:767px) {
.page{
display: grid;
}
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
z-index: 9999;
}
.page p{
z-index: 1;
}
input{
z-index:999;
}