/* Article Layout */
.wrapper {
	width: 100%;
/*
	padding-left: 2%;
	padding-right: 2%;
*/
/* 	background:rgba(127, 127, 127, 0.0); */
/*  background: rgba(204, 31, 97, 0.02); */
	background: rgba(204, 0, 0,0.1);
/* 	background: white; */
/* white; */ /* #F9E6E7 *//* rgba(250,  230,  231, 1); */
}

.wrapper:after {
	content: '';
	clear: both;
	display: block;
}

.wrapper .copy {
	width: 33%;
	float: left;
	position: relative;
}

.demo-2 .wrapper .copy {
	float: right;
}

.wrapper .copy:before {
	width: 0;
	height: 0;
	float: left;
/* 	padding-bottom: 119%; */
	content: '';
}

.wrapper .copy article {
/* rand wrapper oben */
	margin: .6rem;
/* 	padding: 4vw; */
	padding: 2vw;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* test */
/*
.wrapper  {
	margin: 0;
	padding-bottom: 44.55%;
	position: relative;
	background: #000;

}
*/
/* test end */



/* 1st p-tag style */
.wrapper .copy p:first-of-type {
	font-size: 1.4vw;
	line-height: 1.3;			
}

/* 2nd p-tag style */
.copy p {
	font-weight: 300;
	font-size: 1.15vw;
	line-height: 1.2;		
/* 	color:rgba(0, 0, 0, 0.77);	 */
	color: #353535;
}

/*
.copy p a {	
	color:rgba(0, 0, 0, 0.77);	
}
*/

.copy a {
	outline: none;	
/* 	text-decoration: underline dotted; */
	color: rgba(0, 0, 0, 0.77);  
    border-bottom: 1px dotted #777777;
    text-decoration: none;
	transition-delay: 0s;
	transition-duration: 0.6s;
	transition-property: all;
	transition-timing-function: ease;
}

.copy a:hover, a:focus {
	color: #cc1f61;
    border-bottom: 1px dotted #cc1f61;	
    text-decoration: none;    
	outline: none;
	transition-delay: 0s;
	transition-duration: 0.6s;
	transition-property: all;
	transition-timing-function: ease;		
}

/* asph end */

.wrapper .prism-slider {
	width: 65%;
	float: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.demo-2 .wrapper .prism-slider {
	float: left;
}

/* PrismSlider */
.cache {
	display: none;
}

.prism-slider {
	width: 1200px;
	max-width: 100%;
/* 	placing of bottom line of rose area */
	padding-bottom: 44.55%;
	position: relative;
	background: #fff;
}

.prism-slider canvas {
	width: 100%;
/* 	height: auto; */
	position: absolute;
	top: 0;
	left: 0;
}

.navigation {
	width: 100%;
	position: relative;
	bottom: 1rem;
	margin-bottom: .8em;
/* 	nav dots were out of center by default - dont know why. this fixes it */
	margin-left: -20px;
	text-align: center;
	list-style: none;
/* 	z-index: 1; */
}

.navigation li {
	border: 2px solid /* #eceff1; */#F9E6E7;
	width: 14px;
	height: 14px;
	margin: 0 6px;
	background: /* #52525a */#F9E6E7;
	border-radius: 70%;
	display: inline-block;
	cursor: pointer;
}

.navigation .active {
	background: /* #eceff1 */#FFF;
}

.navigation a:hover {
	color: #FFF;
}

/* Media Queries */
/* @media screen and (max-width: 1024px) { */
@media screen and (max-width: 940px) {
	.wrapper:after {
		display: none;
	}

	.wrapper .copy, .wrapper .prism-slider {
		width: 100%;
		float: none;	
	}

	.wrapper .copy:before {
		display: none;
	}

	.wrapper .copy article {
		position: relative;
		padding-left: 35px;
		display: block;
		
	}

	.wrapper .copy p:first-of-type {
		font-size: 2.6vw;
	}
	
	.copy p {
		font-size: 1.9vw;
		line-height: 1.2;		
	}	

	.wrapper .prism-slider {
		padding-bottom: 68%;
	}

	.navigation li {
		width: 16px;
		height: 16px;
	}
}

@media screen and (max-width: 600px) {
	.wrapper .copy p:first-of-type {
		font-size: 3.3vw;
	}

	.copy p {
		font-size: 2.6vw;
		line-height: 1.2;		
	}
}

/*
@media screen and (max-width: 40em) {
	.wrapper .copy p:first-of-type {
		font-size: 3.2vw;
	}	
}
*/

@media screen and (max-width: 30em) {
	.wrapper .copy p:first-of-type {
/* 		font-size: 4vw; */
		font-size: 4.9vw;
	}
	.copy p {
		font-size: 4.1vw;
		padding-bottom: 0;		
/* 		line-height: 1.2;		 */
	}	
	.wrapper .copy article {
		padding-left: 22px;
	}	

	.navigation li {
		width: 14px;
		height: 14px;
		margin: 0 9px;		
	}	
}