@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin-ext');

body {
	margin: 0;
	width: 1px;
	min-width: 100%;
	*width: 100%;
}

p {
	margin: 0.25em 0;
}

@media(min-width: 768px){
	.photos-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

#Mcp{
	font-family: 'Open Sans', sans-serif;
	padding: 30px 0px;
	margin: 0 auto;
	max-width: 1200px;
	background: #fff;
	color: #11100b;
	font-weight: 100;
	text-align: justify;
	line-height: 1.6em;
	font-size: 17.5px;
}
@media(max-width: 991px){
	#Mcp{
		font-size: 16px;
	}
}
@media(max-width: 767px){
	#Mcp{
		font-size: 14px;
		line-height: 1.3;
	}
}
@media(max-width: 480px){
	#Mcp{
		font-size: 10px;
		line-height: 1;
	}
}
#Mcp a{
	text-decoration: none;
	color: #11100b;
}
#Mcp .max-50{
	max-width: 50%;
}
#Mcp .max-100{
	max-width: 100%;
}
#Mcp .width-100{
	width: 100%;
}
#Mcp .clear-fix{
	clear: both;
	display: block;
}
#Mcp .border-img{
	border: 1px solid #11100b;
    border-radius: 50%;
}
/* font edit */
#Mcp .grey-color{
	color: #3e3f40;
}
#Mcp .center-text{
	text-align: center;
}
#Mcp > div[class*="section"]{
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}
#Mcp strong{
	color: #11100b;
}
#Mcp .h2-style{
	text-transform: uppercase;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: .75px;	
    text-align: left;
}
@media(max-width: 767px){
	#Mcp .h2-style{
		margin: 10px 0px;
		line-height: 1;
	}
}

/* SEKCJA 1 */
/* panel z obrazkami */
#Mcp .section-1 > .photos-box > div{
	float: left;
}
#Mcp .section-1 > .photos-box > div:nth-of-type(1){
	width: 64%;
}
#Mcp .section-1 > .photos-box > div:nth-of-type(2){
	width: 36%;
}
#Mcp .section-1 > .photos-box > div:nth-of-type(2) > img{
	margin-left: 25%;
	margin-right: 25%;
}
@media(max-width:767px){
	#Mcp .section-1 > .photos-box > div{
		width: 100% !important;
	}
	#Mcp .section-1 > .photos-box > div:nth-of-type(2) > img{
		margin-top: 30px;
		margin-left: 35%;
		margin-right: 35%;
		width: 30%;
	}
}
/* pierwszy akapit */
#Mcp .section-1 > p:first-of-type{
	display: inline-block;
	margin-top: -25px;
	margin-bottom: 30px;
}
#Mcp .section-1 > p:nth-of-type(2){
	margin-bottom: 50px;
}
@media(max-width: 767px){
	#Mcp .section-1 > p:first-of-type{
		margin-top: -10px;
		margin-bottom: 0px;
	}
	#Mcp .section-1 > p:nth-of-type(2){
		margin-bottom: 20px;
	}
}
/* kapsułki */
#Mcp .section-1 > div:last-of-type > img:last-of-type{
	display: none;
}
@media(max-width: 767px){
	#Mcp .section-1 > div:last-of-type > img:first-of-type{
		display: none;
	}
	#Mcp .section-1 > div:last-of-type > img:last-of-type{
		display: inline;
	}
}

/* SEKCJA 2 */
#Mcp > .section-2{
	padding-top: 25px;
	padding-bottom: 25px;
}
@media(max-width: 767px){
	#Mcp > .section-2{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
#Mcp > .section-2 > p{
	top: 60%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
    position: absolute;
    right: 15px;
	left: 310px;
}
#Mcp > .section-2 > div{
	width: 270px;
}
.section-2-p-h {
	display: block;
	margin-bottom: 0.50em;
	font-size: 120%;
}
@media(max-width: 991px){
	#Mcp > .section-2 > p{
		left: 200px;
	}
	#Mcp > .section-2 > div{
		width: 160px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-2 > div{
		width: 100%;
	}
	#Mcp > .section-2 > div > img{
		margin-left: auto;
		margin-right: auto;
		max-width: 60%;
	}
	#Mcp > .section-2 > p{
		position: relative;
		width: 100%;
		bottom: 0;
		right: 0;
		left: 0;
		top: 0;
		transform: none;
	}
}

/* SEKCJA 3 */
#Mcp > .section-3{
	padding-top: 50px;
	padding-bottom: 50px;
}
@media(max-width: 767px){
	#Mcp > .section-3{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
#Mcp > .section-3 strong:last-of-type{
	position: relative;
}
#Mcp > .section-3 strong:last-of-type:after{
	height: 10px;
    content: '';
    position: absolute;
    background: url(../img/underline.png)center center no-repeat;
    width: 100%;
    bottom: -15px;
    left: 0px;
}
@media(max-width: 445px){
	#Mcp > .section-3 strong:last-of-type:after{
		display: none;
	}
}
#Mcp > .section-3 > div:first-of-type{
	width: 250px;
}
#Mcp > .section-3 > div:nth-of-type(2){
	position: absolute;
	left: 280px;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
#Mcp > .section-3 > div:nth-of-type(2) > p{
	margin-top: 0px;
	text-transform: uppercase;
}
@media(max-width: 991px){
	#Mcp > .section-3 > div:nth-of-type(2){
		left: 200px;
	}
	#Mcp > .section-3 > div:first-of-type{
		width: 160px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-3 > div:first-of-type{
		display: none;
	}
	#Mcp > .section-3 > div:nth-of-type(2){
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
	}
}

/* SEKCJA 4 */
#Mcp > .section-4 {
	padding-top: 50px;
	padding-bottom: 50px;
}
@media(max-width: 767px){
	#Mcp > .section-4{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
/* sekcja z róşnokolorowymi ekspresami po najechaniu */
.multicolor-box {
	max-width: 355px;
	position: relative;
}

.multicolor-box .color-selector {
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.multicolor-box .color-selector li {
	display: block;
	width: 8%;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	border-radius: 50%;
}

.multicolor-box .color-selector li:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.multicolor-box:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.multicolor-box .color-versions {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid rgb(0,0,0);
	border-radius: 50%;
	overflow: hidden;
}

.multicolor-box img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

.multicolor-box img:nth-of-type(n+2) {
	opacity: 0;
	transition-duration: .4s;
}

.multicolor-box img.active {
	opacity: 1;
}

.multicolor-box .color-selector li:nth-child(1) {
	bottom: -7.9%;
	left: 43%;
}

.multicolor-box .color-selector li:nth-child(2) {
	bottom: -7.7%;
	left: 55.3%;
}

.multicolor-box .color-selector li:nth-child(3) {
	bottom: -5.1%;
	left: 67.2%;
}

.multicolor-box .color-selector li:nth-child(4) {
	bottom: 0.5%;
	left: 78.5%;
}

.multicolor-box .color-selector li[data-color="violet"] {
	background: #8b00b3;
}
.multicolor-box .color-selector li[data-color="red"] {
	background: #d10000;
}
.multicolor-box .color-selector li[data-color="silver"] {
	background: #6f6f6f;
}
.multicolor-box .color-selector li[data-color="black"] {
	background: #000000;
}

.multicolor-box .color-selector li:hover,
.multicolor-box .color-selector li.active {
	box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);
}

/**/
#Mcp > .section-4 > div:nth-of-type(2){
	position: absolute;
	left: 400px;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
@media(max-width: 991px){
	#Mcp > .section-4 > .multicolor-box{
		width: 230px;
		min-height: 230px;
	}
	#Mcp > .section-4 > div:nth-of-type(2){
		left: 270px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-4 > .multicolor-box{
		margin: auto;
		width: auto;
		margin-bottom: 40px;
	}
	#Mcp > .section-4 > div:nth-of-type(2){
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
	}
}
@media(max-width: 300px){
	#Mcp > .section-4 > .multicolor-box{
		display: none;
	}
}

/* SEKCJA 5 */
#Mcp > .section-5{
	padding-top: 50px;
	padding-bottom: 50px;
}
#Mcp > .section-5 .coffies-box{
	padding-top: 15px;
}
@media(max-width: 767px){
	#Mcp > .section-5 {
		padding-top: 0px;
	}
	#Mcp > .section-5 .coffies-box{
		text-align: center;
	}
}

#Mcp > .section-5 > div:first-of-type{
	position: absolute;
	left: 15px;
	right: 400px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
#Mcp > .section-5 > div:nth-of-type(2){
	float: right;
	width: 360px;
}
#Mcp > .section-5 > div:nth-of-type(2):after{
	content: '';
	clear: both;
	display: block;
}
@media(max-width: 991px){
	#Mcp > .section-5 > div:first-of-type{
		position: relative;
		transform: none;
		top: 0;
		left: 0;
		right: 0;
		margin-right: 270px;
	}
	#Mcp > .section-5 > div:nth-of-type(2){
		position: absolute;
		top: 100px;
		right: 15px;
		width: 230px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-5 > div:first-of-type{
		margin-right: 0px;
	}
	#Mcp > .section-5 > div:nth-of-type(2){
		position: relative;
		transform: none;
		top: 0;
		right: 0;
		max-width: 100%;
		width: 360px;
		margin: 20px auto 0px auto;
		float: none;
	}
}

/* SEKCJA 6 */
#Mcp > .section-6 {
	padding-top: 50px;
	padding-bottom: 50px;
}
@media(max-width: 767px){
	#Mcp > .section-6{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
#Mcp > .section-6 > div:nth-of-type(2){
	width: 360px;
}
#Mcp > .section-6 > div:first-of-type{
	position: absolute;
	left: 400px;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
@media(max-width: 991px){
	#Mcp > .section-6 > div:nth-of-type(2){
		width: 230px;
	}
	#Mcp > .section-6 > div:first-of-type{
		left: 270px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-6 > div:nth-of-type(2){
		width: 360px;
		margin: auto;
		max-width: 90%;
		display: block;
	}
	#Mcp > .section-6 > div:first-of-type{
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
	}
}

/* SEKCJA 7 */
#Mcp > .section-7 {
	padding-top: 50px;
	padding-bottom: 50px;
}
@media(max-width: 767px){
	#Mcp > .section-7{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
#Mcp > .section-7 > div:nth-of-type(2){
	width: 360px;
	float: right;
}
#Mcp > .section-7 > div:nth-of-type(2):after{
	content: '';
	clear: both;
	display: block;
}
#Mcp > .section-7 > div:first-of-type{
	position: absolute;
	right: 400px;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
@media(max-width: 991px){
	#Mcp > .section-7 > div:nth-of-type(2){
		width: 230px;
	}
	#Mcp > .section-7 > div:first-of-type{
		right: 270px;
	}
}
@media(max-width: 767px){
	#Mcp > .section-7 > div:nth-of-type(2){
		width: 360px;
		margin: auto;
		max-width: 90%;
		display: block;
		float: none;
	}
	#Mcp > .section-7 > div:first-of-type{
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
	}
}

.warranty {
	width: 250px;
	margin: 15px auto auto;
}

.warranty img {
	display: block;
	width: 100%;
}

@media(max-width: 480px){
	.warranty {
		width: 60%;
	}
}

@media(min-width: 767px){
	.warranty {
		width: 250px;
		margin: 15px 0 0 0;
	}
}

@media(min-width: 767px) and (max-width: 991px){
	.warranty {
		width: 200px;
	}
}