/*iPhone 5 in portrait*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

body {
    text-align: center;
    margin: 0px;
}

#wrapper {
	position: relative;
	margin: 0 auto;
	height: 3030px;	
	overflow: hidden;
}

/*__________________NAVI________________*/

.navi {
	position: absolute;
	top:0px;
	right:22%;
	z-index: 1;
	transition-property: top; 
	transition-duration: 0.25s;
}

.navi.inactive {
	top: -130px;
	transition-property: top; 
	transition-duration: 0.25s;
}

ul {
    position: absolute;
	right: 23px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300; 
	font-size: 15px;
	color: white;
	text-align:left;
	line-height: 2em;
	cursor: pointer;

	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.line1 {
	position: absolute;
	right: -4px;
	top: -11px;
	width: 100px;
	height: 4px;
	background-color: white;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transition-property: all;
	transition-duration: 0.5s;
}

.line2 {
	position: absolute;
	right: -47px;
	top: -10px;
	width: 100px;
	height: 4px;
	background-color: white;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transition-property: all;
	transition-duration: 0.5s;
}

.line3 {
	position: absolute;
	right: -49px;
	top: 30px;
	width: 100px;
	height: 4px;
	background-color: white;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transition-property: all;
	transition-duration: 0.5s;
}

.line4 {
	position: absolute;
	right: -107px;
	top: 28px;
	width: 126px;
	height: 4px;
	background-color: white;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transition-property: all;
	transition-duration: 0.5s;
}

/*__________________TOP + LOGO________________*/

.back1 {
	position: fixed;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background: url("../back1.jpg") center center no-repeat;
	background-size: cover;
	left: 0px;
	top: 0px;
}

.triangle_move2 {
	position: absolute;
/*	left: -19px;
	top: -10px;
	height:1200px;
	width:100%;
	background: url(back1.jpg)  no-repeat, orange;  
	-webkit-background-blend-mode: multiply, normal; 
	background-blend-mode: multiply, normal;*/

	left: -800px;
	top: -1614px;
	border-top: 1607px solid transparent;
	border-bottom: 1607px solid transparent;
	border-left: 1607px solid #C5324A;
	overflow: hidden;
}

.triangle_move {
	position: absolute;
	width: 3100px;
	height: 2100px;
	left: 50%;
	top: -800px;
	margin-left: -2807px;
	overflow: hidden;
	-moz-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	-webkit-transform: rotate(-55deg);

	background-image: -webkit-linear-gradient(#C5324A 70%, #8A1133 100%); 
	background-image: -moz-linear-gradient(#C5324A 70%, #8A1133 100%); 
	background-image: -o-linear-gradient(#C5324A 70%, #8A1133 100%); 
	background-image: linear-gradient(#C5324A 70%, #8A1133 100%);	
}

.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1000px;
	overflow: hidden;	
}

/*__________________PROJECTS________________*/

.content {
	position: relative;
	margin: 0 auto;
	width: 1024px;
	height: 4456px;	
	right: 0px;
	top: 1500px;
}

.background {
	position: absolute;
	width: 165%;
	right: -325px;
	height: 1000px;
	background-color: #111111;
}

.triangle_darkred {
	position: absolute;
	right: -659px;
	top: -902px;
	width: 0;
	height: 0;
	border-top: 1591px solid transparent;
	border-bottom: 1591px solid transparent;
	border-right: 1591px solid #9F293E;
	overflow: hidden;
}

.triangle_red {
	position: absolute;
	left: -1386px;
	top: -1342px;
	width: 0;
	height: 0;
	border-top: 1607px solid transparent;
	border-bottom: 1607px solid transparent;
	border-left: 1607px solid #C5324A;
	overflow: hidden;
}

.triangle_black {
	position: absolute;
	right: -445px;
	top: 108px;
	width: 0;
	height: 0;
	border-bottom: 2500px solid transparent;
	border-right: 2500px solid #111111;
	overflow: hidden;
}

h1 {
	position: absolute;
	left: 8px;
	top: 220px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300; 
	font-size: 14px;
	color: white;
}

h2 {
	position: absolute;
	left: 8px;
	top: 240px;
	width: 200px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 15px;
	color: white;
	text-align:left;
	line-height: 1.3em;
}

h4 {
	position: absolute;
	left: 20px;
	top: 26px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 46px;
	color: white;
	text-align:left;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300; 
	color: white;
	text-align: left;
	line-height: 1.3em;
}

.project_text {
	position: absolute;
	left: 8px;
	top: 287px;
	width: 150px;
	font-size: 12px;
}

.description1 {
	opacity: 0;
}

.description2 {
	opacity: 0;
}

.description3 {
	opacity: 0;
}

.description4 {
	opacity: 0;
}

.description5 {
	opacity: 0;
}

.description6 {
	opacity: 0;
}

.description7 {
	opacity: 0;
}

.description8 {
	opacity: 0;
}

.description9 {
	opacity: 0;
}

.description10 {
	opacity: 0;
}

.description11 {
	opacity: 0;
}

.description12 {
	opacity: 0;
}

.description13 {
	opacity: 0;
}

.description14 {
	opacity: 0;
}

.description_general {
	opacity: 1;
}

.P1 {
	position: absolute;
	left: 136px; 
	top: 526px;
	width: 70px;	
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P2 {
	position: absolute;
	left: 87px;
	top: 477px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P3 {
	position: absolute;
	left: 185px;
	top: 477px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P4 {
	position: absolute;
	left: 37px;
	top: 428px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P5 {
	position: absolute;
	left: 235px;
	top: 427px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P6 {
	position: absolute;
	left: 87px;
	top: 378px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P7 {
	position: absolute;
	left: 186px;
	top: 378px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P8 {
	position: absolute;
	left: 136px;
	top: 329px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P9 {
	position: absolute;
	left: 236px;
	top: 329px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P10 {
	position: absolute;
	left: 38px;
	top: 526px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P11 {
	position: absolute;
	left: 145px;
	top: 139px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P12 {
	position: absolute;
	left: 98px;
	top: 93px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P14 {
	position: absolute;
	left: 186px;
	top: 280px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

.P15 {
	position: absolute;
	left: 193px;
	top: 188px;
	width: 70px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	opacity: 1;
	cursor: pointer;
}

/*__________________ABOUT________________*/

h5 {
	position: absolute;
	left: 49px;
	top: 840px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 46px;
	color: white;
	text-align:left;
}

.about_text {
	position: absolute;
	left: 61px;
	top: 890px;
	width: 212px;
	font-size: 12px;
}

.me {
	position: absolute;
	left: -80px;
	bottom: 0px;
	width: 800px;
}

.red_line1 { 
	position: absolute;
	left: 25px;
	top: 882px;
	width: 26px;
	border: none; 
	border-top: 2px dashed #C5324A; 
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.red_line2 { 
	position: absolute;
	left: -153px;
	top: 1073px;
	width: 365px;
	border: none; 
	border-top: 2px dashed #C5324A; 
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.red_line3 { 
	position: absolute;
	left: 30px;
	top: 1393px;
	width: 542px;
	border: none; 
	border-top: 2px dashed #C5324A; 
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

/*__________________CONTACT________________*/

.contact_text {
	position: absolute;
	left: 61px;
	top: 1089px;
	width: 428px;
	font-size: 15px;
}

a.mail {
	position: absolute;
	left: 61px;
	top: 1109px;
	width: 428px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300; 
	color: #C5324A;
	text-align: left;
	line-height: 1.3em;
	font-size: 15px;
	text-decoration: none;
}

.underline {
	position: absolute;
	left: 131px;
	top: 1127px;
	width: 100px;
	height: 4px;
	background-color: #C5324A;
	transition-property: all;
	transition-duration: 0.5s;
}

.red_box_fb {
	position: absolute;
	background-color: #C5324A;
	left: 160px;
	top: 1169px;
	height: 47px;
	width: 47px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.red_box_tw {
	position: absolute;
	background-color: #C5324A;
	left: 124px;
	top: 1205px;
	height: 47px;
	width: 47px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.red_box_g {
	position: absolute;
	background-color: #C5324A;
	left: 196px;
	top: 1205px;
	height: 47px;
	width: 47px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.red_box_p {
	position: absolute;
	background-color: #C5324A;
	left: 160px;
	top: 1241px;
	height: 47px;
	width: 47px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/*__________________OVERLAY________________*/
.project1 {
	height: 1500px;
}

.project2 {
	height: 1500px;
}

.project3 {
	height: 1500px;
}

.project4 {
	height: 1500px;
}

.project5 {
	height: 1500px;
}

.project6 {
	height: 1500px;
}

.project7 {
	height: 1500px;
}

.project8 {
	height: 1500px;
}

.project9 {
	height: 1500px;
}

.project10 {
	height: 1500px;
}

.project11 {
	height: 1500px;
}

.project12 {
	height: 1500px;
}

.project13 {
	height: 1500px;
}

.project14 {
	height: 1500px;
}

.project15 {
	height: 1500px;
}

.layer {
	position: absolute;
	height: 1760px;
	width: 2000px;
	right: 2000px;
	top: 0px;
	overflow: hidden;	
	transition-property: all;
	transition-duration: 0.5s;
}

.layer.active{
	right: -500px;
	transition-property: all;
	transition-duration: 0.5s;
}

.layer_red {
	position: absolute;
	background-color: #C5324A;
	height: 1230px;
	width: 1530px;
	right: 0px;
	top: 301px;	
}

.slide_box {
	position: absolute;
	background-color: white;
	opacity:0.8;
	height: 35px;
	width: 2000px;
	right: 0px;
	top: 585px;	
	display: none;
}

.slide_n1 {
	position: absolute;
	left: 490px;
	top: 591px;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 20px;
	color: #111111;
	display: none;
}

.slide_n2 {
	position: absolute;
	left: 535px;
	top: 591px;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 20px;
	color: #111111;
	display: none;
}

.slide_n3 {
	position: absolute;
	left: 590px;
	top: 591px;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 20px;
	color: #111111;
	display: none;
}

.slide_n4 {
	position: absolute;
	left: 645px;
	top: 591px;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 20px;
	color: #111111;
}

.layer_navi {
	position: absolute;
	background-color: white;
	height: 55px;
	width: 165%;
	right: -325px;
	top: 0px;	
	left: 0px;
}

.slide1 {
	position: relative;
	left: 0px;
	top: 55px;
	width: 690px;
}

.slide2 {
	position: absolute;
	left: 2000px;
	top: 55px;
	width: 690px;
}

.slide3 {
	position: absolute;
	left: 4000px;
	top: 55px;
	width: 690px;
}

.slide4 {
	position: absolute;
	left: 6000px;
	top: 55px;
	width: 690px;
}

.layer > div{
	position: absolute;	
	overflow: hidden;
	width: 1630px;
}

h2.layer_headline {
	position: absolute;
	left: 497px;
	top: 313px;
	width: 400px;
	z-index: 1;
}

p.layer_text {
	position: absolute;
	left: 497px;
	top: 369px;
	width: 280px;
	z-index: 1;
	font-size: 12px;
}

p.layer_text2 {
	position: absolute;
	left: 497px;
	top: 369px;
	width: 280px;
	z-index: 1;
	font-size: 12px;
}

p.layer_text3 {
	position: absolute;
	left: 497px;
	top: 369px;
	width: 280px;
	z-index: 1;
	font-size: 12px;
}

.pic1 {
	position: absolute;
	left: 485px;
	top: 657px;
	width: 302px;
	z-index: 1;
}

.pic2 {
	position: absolute;
	left: 485px;
	top: 867px;
	z-index: 1;
	width: 302px;
}

.pic3 {
	position: absolute;
	left: 485px;
	top: 1077px;
	z-index: 1;
	width: 302px;
}

.pic4 {
	position: absolute;
	left: 485px;
	top: 967px;
	width: 146px;
	z-index: 1;
}

.pic5 {
	position: absolute;
	left: 641px;
	top: 967px;
	width: 146px;
	z-index: 1;
}

.pic6 {
	position: absolute;
	left: 485px;
	top: 1122px;
	width: 302px;
	z-index: 1;
}

.pic7 {
	position: absolute;
	left: 641px;
	top: 626px;
	z-index: 1;
	width: 146px;
}

.pic8 {
	position: absolute;
	left: 485px;
	top: 857px;
	z-index: 1;
	width: 146px;
}

.pic9 {
	position: absolute;
	left: 641px;
	top: 857px;
	z-index: 1;
	width: 146px;
}

.pic19 {
	position: absolute;
	left: 485px;
	top: 626px;
	z-index: 1;
	width: 146px;
}

.pic10 {
	position: absolute;
	left: 485px;
	top: 867px;
	z-index: 1;
	width: 302px;
	display: none;
}

.pic11 {
	position: absolute;
	left: 485px;
	top: 1077px;
	z-index: 1;
	width: 302px;
	display: none;
}

.pic12 {
	position: absolute;
	left: 485px;
	top: 867px;
	z-index: 1;
	width: 302px;
}

.pic13 {
	position: absolute;
	left: 485px;
	top: 1077px;
	z-index: 1;
	width: 302px;
}

.pic14 {
	position: absolute;
	left: 485px;
	top: 1082px;
	z-index: 1;
	display: none;
}

.pic15 {
	position: absolute;
	left: 485px;
	top: 396px;
	width: 302px;
	z-index: 1;
}

.pic16 {
	position: absolute;
	left: 485px;
	top: 867px;
	width: 302px;
	z-index: 1;
}

.pic17 {
	position: absolute;
	left: 485px;
	top: 935px;
	z-index: 1;
	width: 302px;
}

.pic18 {
	position: absolute;
	left: 485px;
	top: 1147px;
	z-index: 1;
	width: 302px;
}

iframe {
	position: absolute;
	left: 485px;
	top: 726px;
	width: 302px;
	height: 200px;
	z-index: 1;
}

a.link_pixabit1 {
	position: absolute;
	left: 497px;
	top: 575px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; 
	color: white;
	z-index: 1;
	text-decoration: none;
}

a.link_pixabit2 {
	position: absolute;
	left: 497px;
	top: 613px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; 
	color: white;
	z-index: 1;
	text-decoration: none;
}

a.link_pokearound {
	position: absolute;
	left: 497px;
	top: 616px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; 
	color: white;
	z-index: 1;
	text-decoration: none;
}

/*__________________LAYER-NAVI-CONTENT________________*/

div.layerNavi{
	display: none; 	
}


p.category {
	position: absolute;
	left: 2%;
	top: 1515px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	font-size: 20px;
	color: #111111;
	display: none;
}

p.close {
	position: absolute;
	right: 5%;
	top: 1515px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; 
	font-size: 20px;
	color: #111111;
	cursor: pointer;
}

.underline2 {
	position: absolute;
	left: 1090px;
	top: 931px;
	width: 100px;
	height: 4px;
	background-color: white;
	transition-property: all;
	transition-duration: 0.5s;
	z-index: 1;
	display: none;
}

.underline3 {
	position: absolute;
	left: 1090px;
	top: 961px;
	width: 100px;
	height: 4px;
	background-color: white;
	transition-property: all;
	transition-duration: 0.5s;
	z-index: 1;
	display: none;
}

.underline4 {
	position: absolute;
	left: 1027px;
	top: 931px;
	width: 100px;
	height: 4px;
	background-color: white;
	transition-property: all;
	transition-duration: 0.5s;
	z-index: 1;
	display: none;
}

.underline5 {
	position: absolute;
	left: 1064px;
	top: 951px;
	width: 100px;
	height: 4px;
	background-color: white;
	transition-property: all;
	transition-duration: 0.5s;
	z-index: 1;
	display: none;
}

/*________________ QUOTE ______________*/

.quote{
    position: absolute;
    top: 1120px;
    left: 35px;
    font-size: 15px;
    line-height: 20px;
    width: 250px;
    text-align: center;
    font-weight: 600;
    opacity: 0;
}

.quoteOf{
    position: absolute;
    top: 1185px;
    left: 223px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
}

.sliderPics{
	width:2000px;
	height: 600px;
	background: black;
}

/*________________ BACK-TO-TOP ______________*/

.background_top {
	position: absolute;
    bottom: 2925px;
    left: 0px;
    width: 2000px;
    margin-left: -488px;
    height: 35px;
    z-index: 5;
    background-color: white;
}

}